如何使用 JavaScript 動態變更 CSS 規則集？

從 JavaScript 更改 CSS 規則集

動態操作 CSS 規則集可能具有挑戰性。但是，當尋求根據使用者操作（例如單擊小部件）修改頁面元素時，了解如何執行此操作至關重要。

要透過 JavaScript 啟動 CSS 規則集的更改，請依照下列步驟操作：

1。找到規則集：

決定管理您要修改的元素的特定 CSS 規則集。

2.使用 Document.styleSheets：

存取文檔物件的 styleSheets屬性：

var styleSheet = document.styleSheets[0]; // selects the first stylesheet

3.存取規則集：

指定要修改的規則集的索引：

var rule = styleSheet.cssRules[index]; // where index represents the specific rule-set

4.修改規則：

使用規則物件的style屬性更新規則屬性：

rule.style.setProperty('color', 'red');

範例：

考慮下列CSS 規則集：

.element {
  color: blue;
}

使用下列指令更改所有元素的顏色點擊小工具時將.element 類別設為紅色，您可以使用以下JavaScript：

document.querySelector('.widget').addEventListener('click', function() {
  var styleSheet = document.styleSheets[0];
  var rule = styleSheet.cssRules[0]; // assumes the CSS rule-set is the first one
  rule.style.setProperty('color', 'red');
});

瀏覽器相容性：

請注意，此方法與大多數瀏覽器相容於現代瀏覽器，包括Firefox、Internet Explorer 和Chrome 。

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