除了內聯樣式之外，JavaScript 還能直接修改 CSS 樣式表嗎？

使用JavaScript 進行動態CSS 修改：超越內聯樣式

雖然JavaScript 提供了操作單個HTML 元素的樣式屬性的廣泛功能，但出現了一個常見的查詢：是否可能改變底層CSS 樣式表本身？

澄清一下，這個問題具體涉及修改

動態樣式表變更

為了使用JavaScript 動態修改CSS 樣式表，現代瀏覽器提供了insertRule() 方法來添加規則和用於刪除現有規則的deleteRule() 方法。

let styleSheet = document.styleSheets[0];
styleSheet.insertRule("#id { color: red; }", 0);  // Adds a rule to the beginning of the stylesheet
styleSheet.deleteRule(0);  // Removes the rule that was just added

此外，樣式表的 cssRules 屬性允許存取它所包含的個人規則。這提供了對規則操作的更好控制。

let rule = styleSheet.cssRules[0];
rule.selectorText = "#new_id";  // Changes the selector for a rule
rule.style.color = "blue";  // Modifies the style properties defined by a rule

超越骯髒的駭客

可能很容易訴諸「骯髒」方法，例如創建新的樣式元素並將其插入頭部。然而，這種方法存在一些缺點：

• 由於重複的規則定義而導致樣式表衝突
• 動態產生和解析樣式區塊的潛在效能問題
• 依賴瀏覽器-特定行為

透過利用內建的insertRule() 和deleteRule()方法，開發人員可以以強大且受支援的方式動態變更 CSS 樣式表。

以上是除了內聯樣式之外，JavaScript 還能直接修改 CSS 樣式表嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！