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

1. 獲取元素
2. 修改樣式
3. 使用CSS樣式表
4. 動態(tài)創(chuàng)建和插入樣式規(guī)則

如何操作JavaScript修改CSS樣式

在網(wǎng)頁開發(fā)中，我們經(jīng)常需要動態(tài)地改變頁面的樣式以適應(yīng)不同的場景和需求，JavaScript 是一種強大的腳本語言，我們可以通過它修改 CSS 樣式，本文將介紹如何使用 JavaScript 修改 CSS 樣式。

獲取元素

我們需要獲取到要修改樣式的 HTML 元素，可以通過document.getElementById()、document.querySelector() 等方法獲取元素。

var element = document.getElementById('myElement'); // 通過 ID 獲取元素
var elements = document.getElementsByClassName('myClass'); // 通過類名獲取元素

修改樣式

獲取到元素后，我們可以通過修改其style 屬性來更改樣式。

element.style.color = 'red'; // 修改文字顏色為紅色
element.style.backgroundColor = '#fff'; // 修改背景色為白色

使用CSS樣式表

除了直接修改元素的樣式，我們還可以使用 JavaScript 來操作 CSS 樣式表，可以通過document.styleSheets 獲取到所有的樣式表，然后通過操作樣式表的cssRules 或rules 屬性來修改樣式。

var stylesheet = document.styleSheets[0]; // 獲取***個樣式表
var rule = stylesheet.cssRules[0]; // 獲取***條規(guī)則
rule.style.color = 'red'; // 修改規(guī)則中的樣式

動態(tài)創(chuàng)建和插入樣式規(guī)則

我們還可以動態(tài)地創(chuàng)建新的樣式規(guī)則，并將其插入到樣式表中。

var stylesheet = document.styleSheets[0]; // 獲取***個樣式表
var rule = stylesheet.insertRule('.myClass { color: red; }', stylesheet.length); // 在末尾插入新的規(guī)則

就是使用 JavaScript 修改 CSS 樣式的基本方法，我們可以通過直接修改元素的style 屬性，操作 CSS 樣式表，或者動態(tài)創(chuàng)建和插入樣式規(guī)則來實現(xiàn)樣式的動態(tài)更改，在實際開發(fā)中，可以根據(jù)具體的需求選擇適合的方法。