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

1. 直接操作元素的style屬性
2. 使用classList添加類名
3. 使用CSSStyleSheet對象

原生JavaScript與CSS的交互：如何動態(tài)添加樣式

在現(xiàn)代前端開發(fā)過程中，我們經(jīng)常需要利用JavaScript來動態(tài)地改變頁面的樣式，雖然我們可以直接在HTML元素中使用內(nèi)聯(lián)樣式或者通過CSS文件定義樣式，但在某些情況下，我們可能需要根據(jù)用戶的交互或者其他條件動態(tài)地改變樣式，這時，我們可以使用原生JavaScript來操作CSS樣式。

直接操作元素的style屬性

JavaScript允許我們直接通過元素的style屬性來修改CSS樣式，這種方式簡單直接，適用于簡單的樣式調(diào)整。

// 獲取元素
var element = document.getElementById('myElement');
// 添加CSS樣式
element.style.color = 'red';  // 改變文字顏色
element.style.backgroundColor = '#f0f0f0';  // 改變背景色

使用classList添加類名

除了直接操作style屬性，我們還可以使用classList來添加、刪除或切換CSS類名，這種方式更加靈活，可以把復(fù)雜的樣式定義在CSS類中，然后通過JavaScript來動態(tài)控制這些類的應(yīng)用。

// 獲取元素
var element = document.getElementById('myElement');
// 添加類名
element.classList.add('myClass');
// 移除類名
element.classList.remove('myClass');
// 切換類名（如果存在則移除，不存在則添加）
element.classList.toggle('myClass');

使用CSSStyleSheet對象

對于更復(fù)雜的情況，我們可能需要操作整個CSS樣式表，這時，我們可以使用CSSStyleSheet對象來添加或修改樣式規(guī)則。

// 獲取樣式表對象
var stylesheet = document.styleSheets[0];  // 假設(shè)樣式表在文檔的head部分
var cssRule = document.createElement('style');  // 創(chuàng)建新的樣式規(guī)則元素
cssRule.innerHTML = '.myClass { color: red; }';  // 定義樣式規(guī)則內(nèi)容
stylesheet.insertRule(cssRule, 0);  // 在樣式表的開始位置插入新的樣式規(guī)則元素

就是使用原生JavaScript添加CSS樣式的幾種常見方式，在實際開發(fā)中，我們可以根據(jù)具體的需求和場景選擇合適的方式，為了更好地組織和管理代碼，我們通常會結(jié)合使用這些方式，以達(dá)到更好的效果和效率。