假設你有一個段落。

<p id="target">rainbow 🌈</p>

你需要用JS改變它的顏色。你有什麼選擇？

1. 內聯樣式

最直接的路徑。從 DOM 查詢元素並變更其內聯樣式。

document.getElementById('target').style.color = 'tomato';

簡短而簡單。

2. 全域樣式

另一種選擇是建立 <style> 標籤，用 CSS 規則填充它並將標籤附加到 DOM。

  var style = document.createElement('style');
  style.innerHTML = `
  #target {
  color: blueviolet;
  }
  `;
  document.head.appendChild(style);

3. CSSOM 插入規則

第三種選擇鮮為人知。我們將使用 CSSStyleSheet insertRule 方法。

  var style = document.createElement('style');
  document.head.appendChild(style);
  style.sheet.insertRule('#target {color: darkseagreen}');

雖然它可能看起來與第二個選項相似，但它絕對不同。

正如您在 Chrome 開發工具中看到的那樣，“