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

1. 內(nèi)聯(lián)樣式
2. 操作 CSS 類
3. 使用 CSSStyleSheet 對象

JavaScript 中管理和引用 CSS 樣式的多種方式

在 JavaScript 中管理和引用 CSS 樣式有多種方式，下面是一些主要的方法：

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

在 JavaScript 中，我們可以通過直接操作 HTML 元素的 style 屬性來修改或添加 CSS 樣式，這種方式適用于單個(gè)元素的樣式修改。

document.getElementById("myElement").style.color = "red";

操作 CSS 類

我們可以使用 JavaScript 來添加、移除或切換 CSS 類，這種方式適用于對一組元素應(yīng)用相同的樣式。

var element = document.getElementById("myElement");
element.classList.add("myClass");  // 添加類
element.classList.remove("myClass");  // 移除類
element.classList.toggle("myClass");  // 切換類

使用 CSSStyleSheet 對象

我們可以使用 CSSStyleSheet 對象來動態(tài)地添加或修改 CSS 規(guī)則，這種方式適用于對多個(gè)元素應(yīng)用樣式或?qū)σ延械?CSS 規(guī)則進(jìn)行修改。

var styleSheet = document.createElement('style');  // 創(chuàng)建 style 元素
styleSheet.innerHTML =.myClass { color: red; };  // 添加 CSS 規(guī)則
document.head.appendChild(styleSheet);  // 將 style 元素添加到 head 中

四、使用鏈接（link）引入外部 CSS 文件

在 HTML 文件中，我們可以通過<link> 標(biāo)簽引入外部的 CSS 文件，這種方式適用于大型項(xiàng)目，需要組織和管理復(fù)雜的樣式表。

<link rel="stylesheet" type="text/css" href="styles.css">

就是 JavaScript 中管理和引用 CSS 樣式的幾種主要方式，在實(shí)際開發(fā)中，我們可以根據(jù)項(xiàng)目的需求和具體情況選擇合適的方式。