本文目錄導讀：

1. 內聯(lián)樣式
2. 通過類名添加CSS
3. 使用CSSStyleSheet對象

JavaScript與CSS的整合：網(wǎng)頁樣式的動態(tài)調整

在網(wǎng)頁開發(fā)中，JavaScript與CSS的配合使用是常見的做法，通過JavaScript我們可以動態(tài)地改變網(wǎng)頁的樣式，使得網(wǎng)頁更具互動性和靈活性，本文將介紹如何使用JavaScript添加CSS樣式。

內聯(lián)樣式

我們可以使用JavaScript來操作元素的style屬性，直接添加CSS樣式，這種方式簡單直接，適用于對單個元素的樣式調整。

示例：

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

通過類名添加CSS

JavaScript可以通過操作元素的className屬性，為元素添加或移除CSS類名，從而應用或取消應用樣式表中的樣式，這種方式適用于對一組元素應用相同的樣式。

示例：

// 獲取元素
var element = document.getElementById('myElement');
// 添加類名
element.classList.add('myClass');  // 添加類名，應用樣式
// 移除類名
element.classList.remove('myClass');  // 移除類名，取消應用樣式

使用CSSStyleSheet對象

我們可以使用JavaScript的CSSStyleSheet對象來操作整個樣式表，這種方式適用于對全局樣式進行修改或添加新的樣式規(guī)則。

示例：

// 創(chuàng)建新的樣式規(guī)則
var styleSheet = document.styleSheets[0];  // 獲取樣式表對象
var cssRule = styleSheet.insertRule('.myClass { color: red; }', styleSheet.cssRules.length);  // 添加新的樣式規(guī)則到樣式表末尾

就是使用JavaScript添加CSS樣式的幾種常見方式，在實際開發(fā)中，我們可以根據(jù)具體需求和場景選擇合適的方式來實現(xiàn)樣式的動態(tài)調整，為了更好地維護代碼和提高代碼的可讀性，我們還需要注意代碼的排版和組織。