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

1. 獲取元素并修改樣式
2. 操作CSS類
3. 使用CSSStyleSheet對象

如何在JavaScript中操作CSS樣式表

在網(wǎng)頁開發(fā)中，JavaScript（JS）和CSS樣式表是兩種非常重要的技術(shù)，它們分別負(fù)責(zé)網(wǎng)頁的動態(tài)交互和靜態(tài)樣式展示，在實際開發(fā)中，我們經(jīng)常需要在JS中修改CSS樣式表以達(dá)到動態(tài)調(diào)整頁面布局和樣式的效果，本文將介紹如何在JavaScript中操作CSS樣式表。

獲取元素并修改樣式

我們需要通過JavaScript獲取到需要修改樣式的元素，可以使用document.getElementById()、document.querySelector()等方法獲取元素，我們可以直接修改元素的style屬性來更改樣式。

var element = document.getElementById("myElement"); // 獲取元素
element.style.color = "red"; // 修改元素樣式

操作CSS類

除了直接修改元素的樣式外，我們還可以通過操作元素的類名來修改樣式，我們需要在CSS中定義好類，然后在JS中獲取元素并修改其className屬性。

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

使用CSSStyleSheet對象

在較新的瀏覽器中，我們可以使用CSSStyleSheet對象來操作CSS樣式表，通過獲取到樣式表對象，我們可以添加、刪除或修改規(guī)則。

var stylesheet = document.styleSheets[0]; // 獲取樣式表對象
var rules = stylesheet.cssRules || stylesheet.rules; // 獲取規(guī)則數(shù)組
rules[0].style.color = "red"; // 修改規(guī)則樣式

需要注意的是，這種方法兼容性不是很好，主要用于較新的瀏覽器，在實際開發(fā)中，我們還需要考慮兼容性問題，使用這種方法時需要謹(jǐn)慎，由于涉及到樣式表的規(guī)則管理，這種方法相對復(fù)雜一些，需要有一定的基礎(chǔ)知識才能掌握，因此在實際開發(fā)中，我們更常用的是直接修改元素樣式和類名的方法。