JavaScript 如何動態操作 CSS 樣式表？

使用JavaScript 操作CSS 樣式表

除了更改單一元素樣式之外，JavaScript 還可以擴展其範圍以修改CSS 樣式表本身。這種強大的功能使開發人員能夠動態調整網頁的視覺外觀，而無需重新載入頁面或建立新的樣式元素。

insertRule() 方法

insertRule () 方法提供了將新規則注入現有樣式表的網關。它需要兩個參數：CSS 規則（字串格式）和索引。此規則將插入樣式表中的指定索引處。

範例：

const stylesheet = document.styleSheets[0];
stylesheet.insertRule('#myElement { color: red; }', 0);

deleteRule() 方法

要從樣式表中刪除規則，請使用deleteRule () 方法。它接受單一索引參數，指示規則在樣式表中的位置。

範例：

const stylesheet = document.styleSheets[0];
stylesheet.deleteRule(0);

透過cssRules 屬性存取規則

樣式表的cssRules 屬性表的cssRules的存取權限。每個規則都表示為 CSSRule 物件。您可以使用循環遍歷規則並修改其屬性，例如樣式、selectorText 和聲明。

範例：

const stylesheet = document.styleSheets[0];
for (let i = 0; i < stylesheet.cssRules.length; i++) {
  const rule = stylesheet.cssRules[i];
  console.log(rule.selectorText);
  rule.style.color = 'blue';
  rule.style.backgroundColor = 'yellow';
  rule.style.fontSize = '20px';
}

透過利用這些技術，JavaScript透過動態操作CSS 樣式表，增強Web 應用程式的靈活性和回應能力，無需頁面即可實現客製化的使用者體驗和即時調整刷新。

以上是JavaScript 如何動態操作 CSS 樣式表？的詳細內容。更多資訊請關注PHP中文網其他相關文章！