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

1. 內(nèi)聯(lián)樣式
2. 使用CSS類
3. 使用CSS樣式表（CSSOM）
4. 動態(tài)創(chuàng)建和修改樣式表元素

JavaScript與CSS樣式的交互與操作

在網(wǎng)頁開發(fā)中，JavaScript與CSS樣式是兩種重要的技術(shù)，它們共同協(xié)作以實現(xiàn)動態(tài)和交互式的網(wǎng)頁效果，雖然本文主要聚焦于JavaScript如何操作CSS樣式，但在此之前，我們需要理解CSS樣式的基礎(chǔ)知識，我們將探討如何使用JavaScript添加或修改CSS樣式。

內(nèi)聯(lián)樣式

在JavaScript中，我們可以通過直接操作元素的style屬性來添加或修改內(nèi)聯(lián)樣式。

document.getElementById("myElement").style.color = "red"; // 改變元素的顏色為紅色

使用CSS類

除了直接操作樣式外，JavaScript還可以通過操作元素的className屬性來添加或刪除CSS類。

document.getElementById("myElement").className = "myClass"; // 為元素添加CSS類

使用CSS樣式表（CSSOM）

對于更復(fù)雜的樣式更改，我們可以使用JavaScript來操作整個CSS樣式表，我們可以使用sheet對象的insertRule方法來添加新的樣式規(guī)則：

var styleSheet = document.styleSheets[0]; // 獲取***個樣式表
styleSheet.insertRule("body {background-color: blue;}", 0); // 在樣式表的頂部插入新的樣式規(guī)則

動態(tài)創(chuàng)建和修改樣式表元素

我們還可以動態(tài)創(chuàng)建新的style元素并將其添加到文檔中，以動態(tài)地添加新的CSS樣式。

var style = document.createElement('style'); // 創(chuàng)建新的style元素
style.innerHTML =.myClass { color: red; }; // 設(shè)置style元素的CSS內(nèi)容
document.head.appendChild(style); // 將style元素添加到文檔的head部分

就是使用JavaScript添加或修改CSS樣式的基本方法，需要注意的是，這些方法都需要在瀏覽器環(huán)境中運行，因為它們依賴于瀏覽器提供的DOM API，對于大型項目，我們通常會使用更***的框架或庫（如React、Vue等）來更方便地操作DOM和CSS。