本文目錄導讀：

1. 獲取元素引用
2. 創(chuàng)建或修改樣式對象
3. 應用樣式到元素

如何用JavaScript給HTML元素（盒子）添加CSS樣式

在網(wǎng)頁開發(fā)中，我們經(jīng)常需要通過JavaScript來動態(tài)地改變HTML元素的樣式，這對于響應式設計、用戶交互和動態(tài)內(nèi)容展示等場景尤為重要，以下是如何使用JavaScript給盒子（HTML元素）添加CSS樣式的基本步驟和指南。

獲取元素引用

我們需要通過JavaScript獲取到想要添加樣式的HTML元素的引用，可以使用document.getElementById()、document.querySelector()等方法來獲取元素。

創(chuàng)建或修改樣式對象

我們可以創(chuàng)建一個新的樣式對象或者修改已存在的樣式對象來定義新的樣式，這個對象可以包含多個CSS屬性和值。

應用樣式到元素

我們將創(chuàng)建的樣式對象應用到目標HTML元素上，可以通過元素的style屬性來應用樣式。

具體步驟如下：

1、獲取元素：

使用document.getElementById()或document.querySelector()方法獲取到要添加樣式的HTML元素，假設我們有一個id為"myBox"的div元素，我們可以通過以下方式獲取它：

var box = document.getElementById("myBox");

或

var box = document.querySelector("#myBox");

2、創(chuàng)建樣式對象：

創(chuàng)建一個包含CSS屬性和值的新對象，我們可以創(chuàng)建一個包含新的背景顏色和字體大小的樣式對象：

var styleObj = {
    "background-color": "blue",
    "font-size": "20px"
};

3、應用樣式：

將創(chuàng)建的樣式對象應用到目標元素上，可以使用元素的style屬性來設置樣式：

box.style.backgroundColor = styleObj["background-color"];  // 設置背景顏色為藍色
box.style.fontSize = styleObj["font-size"];  // 設置字體大小為20px

這樣，我們就成功地使用JavaScript給盒子（HTML元素）添加了CSS樣式，可以根據(jù)需要修改樣式對象和元素引用，以實現(xiàn)更復雜的樣式更改和動態(tài)交互。