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

1. 獲取元素并修改樣式
2. 使用類名修改樣式
3. 使用CSS樣式表對象修改樣式

如何用JavaScript改變CSS樣式

在網(wǎng)頁開發(fā)中，JavaScript和CSS是兩種重要的技術(shù)，通過JavaScript，我們可以動態(tài)地改變網(wǎng)頁的樣式，從而實現(xiàn)更豐富的交互效果，本文將介紹如何使用JavaScript改變CSS樣式。

獲取元素并修改樣式

要改變元素的CSS樣式，首先需要獲取到該元素，可以使用JavaScript的DOM API來獲取元素，獲取元素后，可以通過修改其style屬性來改變樣式。

// 獲取元素
var element = document.getElementById("myElement");
// 修改樣式
element.style.color = "red";  // 改變文字顏色為紅色
element.style.backgroundColor = "blue";  // 改變背景顏色為藍(lán)色

使用類名修改樣式

除了直接修改元素的style屬性外，還可以通過修改元素的類名來修改樣式，這種方式更加靈活，可以將樣式規(guī)則寫在CSS文件中。

// 獲取元素并修改類名
var element = document.getElementById("myElement");
element.className = "newClass";  // 修改元素的類名為newClass

在CSS中定義newClass的樣式規(guī)則：

.newClass {
  color: green;  /* 文字顏色為綠色 */
  font-size: 20px;  /* 字體大小為20像素 */
}

使用CSS樣式表對象修改樣式

對于復(fù)雜的樣式修改，可以使用JavaScript的CSSStyleSheet對象來操作CSS樣式表，這種方式可以更方便地管理樣式規(guī)則。

// 獲取樣式表對象并添加新的樣式規(guī)則
var stylesheet = document.styleSheets[0];  // 獲取***個樣式表對象
var rule = stylesheet.insertRule(".myRule { color: yellow; }", stylesheet.cssRules.length);  // 在末尾添加新的樣式規(guī)則

使用JavaScript改變CSS樣式是網(wǎng)頁開發(fā)中常見的操作，可以通過直接修改元素的style屬性、修改元素的類名或使用CSS樣式表對象來實現(xiàn)樣式的動態(tài)改變，在實際開發(fā)中，可以根據(jù)需求選擇合適的方式來實現(xiàn)樣式的動態(tài)調(diào)整。