JavaScript動態修改css樣式主要有四種方法：1.直接修改元素style屬性；2.切換classname或classlist；3.操作document.stylesheets集合；4.使用css變量。獲取樣式表使用document.stylesheets集合，遍歷時可訪問每個樣式表的href屬性。通過cssrules或rules屬性可獲取css規則集合，并進一步讀取選擇器和規則內容。添加規則使用insertrule或addrule方法，刪除規則則用deleterule或removerule方法。操作時需注意跨域限制和性能問題，推薦合并操作或使用類名切換。css變量可用于主題切換，通過在:root定義變量并用javascript修改其值實現全局樣式變更。最佳實踐包括優化性能、處理兼容性、避免跨域訪問、提升代碼可維護性及利用開發者工具調試。
直接操作CSS樣式表規則，在JavaScript中實現對網頁樣式的動態修改，主要有以下幾個實用方法：
- 直接修改元素的style屬性：這是最直接也最常用的方法，適用于修改單個元素的特定樣式。
- 修改className或classList：通過切換CSS類名，可以一次性應用多個樣式，更易于維護和復用。
- 操作document.styleSheets集合：可以獲取和修改已加載的樣式表，甚至動態創建新的樣式規則。
- 使用CSS變量（Custom Properties）：通過JavaScript修改CSS變量的值，影響所有使用該變量的元素。
如何使用JavaScript獲取CSS樣式表？
要使用JavaScript獲取CSS樣式表，通常會用到document.styleSheets這個集合。這個集合包含了頁面上所有已加載的樣式表，包括通過標簽引入的外部樣式表和
// 獲取所有樣式表 const styleSheets = document.styleSheets; // 遍歷所有樣式表 for (let i = 0; i < styleSheets.length; i++) { const styleSheet = styleSheets[i]; console.log(styleSheet.href); // 打印樣式表的URL，如果是內部樣式表則為null }
獲取到styleSheet對象后，你可以進一步訪問其cssRules屬性（在某些瀏覽器中是rules），這個屬性是一個包含所有CSS規則的集合。
立即學習“前端免費學習筆記（深入）”；
// 獲取第一個樣式表的CSS規則 const firstStyleSheet = document.styleSheets[0]; const cssRules = firstStyleSheet.cssRules || firstStyleSheet.rules; // 兼容不同瀏覽器 // 遍歷所有CSS規則 for (let j = 0; j < cssRules.length; j++) { const cssRule = cssRules[j]; console.log(cssRule.selectorText); // 打印選擇器 console.log(cssRule.cssText); // 打印完整的CSS規則 }
值得注意的是，由于跨域安全限制，JavaScript可能無法訪問來自不同域的樣式表。此外，直接操作cssRules可能會導致性能問題，特別是對于大型樣式表。
動態添加和刪除CSS規則的實用技巧
動態添加CSS規則，可以使用styleSheet.insertRule()方法（在舊版本IE中使用styleSheet.addRule()）。例如，要為所有p元素添加紅色文本：
const styleSheet = document.styleSheets[0]; // 獲取第一個樣式表 const selector = 'p'; const cssText = 'color: red;'; if (styleSheet.insertRule) { styleSheet.insertRule(selector + '{' + cssText + '}', styleSheet.cssRules.length); } else if (styleSheet.addRule) { // 兼容舊版本IE styleSheet.addRule(selector, cssText, styleSheet.rules.length); }
刪除CSS規則，可以使用styleSheet.deleteRule()方法（在舊版本IE中使用styleSheet.removeRule()）。你需要知道要刪除的規則的索引。
const styleSheet = document.styleSheets[0]; // 獲取第一個樣式表 const indexToRemove = 0; // 假設要刪除第一個規則 if (styleSheet.deleteRule) { styleSheet.deleteRule(indexToRemove); } else if (styleSheet.removeRule) { // 兼容舊版本IE styleSheet.removeRule(indexToRemove); }
添加和刪除規則時，需要注意性能問題。頻繁操作可能會導致頁面重繪和回流，影響用戶體驗。建議盡量合并操作，或者使用CSS類名切換的方式來代替。
如何使用CSS變量（Custom Properties）實現主題切換？
CSS變量提供了一種靈活的方式來實現主題切換。首先，在:root偽類中定義一些CSS變量：
:root { --background-color: white; --text-color: black; } body { background-color: var(--background-color); color: var(--text-color); }
然后，使用JavaScript修改這些變量的值：
function setTheme(theme) { if (theme === 'dark') { document.documentElement.style.setProperty('--background-color', 'black'); document.documentElement.style.setProperty('--text-color', 'white'); } else { document.documentElement.style.setProperty('--background-color', 'white'); document.documentElement.style.setProperty('--text-color', 'black'); } } // 切換到深色主題 setTheme('dark');
這種方法的優點是，只需要修改幾個CSS變量，就可以影響整個頁面的樣式，而且性能較好。
動態修改CSS樣式表的注意事項和最佳實踐
- 性能優化：避免頻繁操作CSS規則，盡量合并操作，或者使用CSS類名切換的方式。
- 瀏覽器兼容性：不同的瀏覽器對CSS規則的操作方法可能略有不同，需要進行兼容性處理。
- 避免跨域問題：JavaScript可能無法訪問來自不同域的樣式表。
- 代碼可維護性：使用CSS變量和CSS類名切換可以提高代碼的可維護性。
- 調試技巧：使用瀏覽器的開發者工具可以方便地查看和調試CSS規則。
總而言之，JavaScript操作CSS樣式表規則是一種強大的技術，可以實現各種動態效果和主題切換。但需要注意性能、兼容性和可維護性等方面的問題。
