本文目錄導(dǎo)讀：

1. 直接設(shè)置元素的style屬性
2. 使用classList操作類名

JavaScript與CSS的交互在網(wǎng)頁開發(fā)中是非常常見的操作，其中給元素添加CSS樣式是其中的一項(xiàng)重要功能，下面我們來詳細(xì)探討如何通過JavaScript給HTML元素添加CSS樣式。

直接設(shè)置元素的style屬性

JavaScript允許我們直接通過元素的style屬性來修改CSS樣式，這種方式是直接操作元素的CSS樣式，適用于簡單的樣式調(diào)整。

// 獲取元素
var element = document.getElementById("myElement");
// 設(shè)置樣式
element.style.color = "red";  // 改變文字顏色
element.style.backgroundColor = "#ccc";  // 改變背景色

使用classList操作類名

除了直接設(shè)置樣式外，我們還可以使用JavaScript的classList屬性來操作元素的類名，從而改變元素的CSS樣式，這種方式適用于樣式規(guī)則較多的情況。

// 獲取元素
var element = document.getElementById("myElement");
// 添加類名
element.classList.add("myClass");  // 添加一個類名
// 移除類名
element.classList.remove("myClass");  // 移除一個類名

三、使用CSSStyleSheet對象操作樣式表

對于更復(fù)雜的樣式操作，我們可以使用CSSStyleSheet對象來操作樣式表，這種方式適用于需要動態(tài)加載或修改整個樣式表的情況。

// 創(chuàng)建新的樣式規(guī)則
var styleSheet = document.createStyleSheet();  // 創(chuàng)建新的樣式表對象
styleSheet.cssText = ".myClass { color: red; background-color: #ccc; }";  // 設(shè)置樣式規(guī)則內(nèi)容

就是使用JavaScript給HTML元素添加CSS樣式的幾種常見方式，在實(shí)際開發(fā)中，我們可以根據(jù)具體需求和場景選擇合適的方式來實(shí)現(xiàn)樣式的動態(tài)調(diào)整，為了更好地維護(hù)代碼的可讀性和可維護(hù)性，我們通常會使用第二種方式，即通過操作類名來添加或修改樣式。