如何從 JavaScript 動態更改 CSS 偽類規則？

從JavaScript 更改CSS 偽類規則

當尋求從JavaScript 動態修改CSS 偽類選擇器時，人們可能會遇到這樣的實作直接操縱這些規則是不可行的。偽類（例如 :link 和 :hover）在全域範圍內運行，影響文件中符合其各自條件的所有元素。

一種潛在的解決方法涉及修改樣式表本身。透過新增具有唯一 ID 的特定元素的規則，可以套用偽類樣式：

#elid:hover { background: red; }

假設每個元素都有唯一的 ID，此技術允許有針對性的樣式。

或者，DOM-Level-2-Style 規範提供了一種更標準化的方法：

document.styleSheets[0].insertRule('#elid:hover { background-color: red; }', 0);

IE，但是，需要自己的語法：

document.styleSheets[0].addRule('#elid:hover', 'background-color: red', 0);

雖然這些方法提供了更大的靈活性，但它們也有缺點。動態樣式表操作可能很複雜且容易出錯。此外，較舊的和不太常見的瀏覽器可能不支援此功能。因此，在生產程式碼中實現這些方法之前，權衡這些方法的必要性和可行性非常重要。

以上是如何從 JavaScript 動態更改 CSS 偽類規則？的詳細內容。更多資訊請關注PHP中文網其他相關文章！