JavaScript中添加CSS樣式的三種方法

在JavaScript中，我們可以通過三種主要方法添加CSS樣式：

1、直接操作樣式表：

這種方法允許我們直接讀取和修改HTML元素的樣式表，我們可以通過element.style屬性來訪問元素的樣式，如果我們想要改變一個元素的背景顏色，我們可以這樣做：

```javascript

let element = document.getElementById('myElement');

element.style.backgroundColor = 'red';

```

這種方法簡單易用，但只適用于直接操作單個元素的樣式，對于更復雜的樣式規(guī)則，我們可能需要使用其他方法。

2、使用style屬性：

我們可以使用style屬性來添加或修改CSS樣式，這種方法可以處理單個元素或多個元素的樣式，我們可以這樣添加一個新的樣式規(guī)則：

```javascript

let style = document.createElement('style');

style.innerHTML = `

#myElement {

background-color: red;

}

`;

document.head.appendChild(style);

```

這種方法允許我們添加更復雜的樣式規(guī)則，但它仍然只適用于單個頁面的樣式規(guī)則，對于全局樣式的添加，我們可能需要使用第三種方法。

3、使用CSSStyleSheet：

我們可以使用CSSStyleSheet接口來添加新的樣式規(guī)則，這種方法允許我們添加全局樣式規(guī)則，并且可以通過insertRule方法來添加新的規(guī)則。

```javascript

let styleSheet = document.styleSheets[0];

styleSheet.insertRule('body { background-color: red; }', 0);

```

這種方法允許我們添加全局樣式的規(guī)則，并且可以通過規(guī)則選擇器來***地定位到需要添加樣式的元素，它需要我們手動管理規(guī)則的順序和位置。

JavaScript提供了多種方法來添加CSS樣式，我們可以根據(jù)具體的需求和場景來選擇***適合的方法。