從 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中文網其他相關文章！
