JS控制css變量可通過document.documentelement.style對象實現，具體包括三種方式：一是直接使用setproperty方法修改變量，如root.style.setproperty(‘–my-variable’, ‘red‘)；二是通過cssstyledeclaration對象操作，同樣調用setproperty和getpropertyvalue方法；三是結合事件監聽器動態修改變量，例如點擊按鈕隨機改變背景色。此外，管理大量變量時可封裝成模塊，提升維護性，如將主題邏輯集中到theme.js中。性能方面應減少頻繁修改、使用requestanimationframe及批量更新。兼容老舊瀏覽器可引入css-vars-ponyfill polyfill。
JS控制CSS變量，說白了就是讓網頁的樣式不再是鐵板一塊，而是能隨著用戶的操作、數據的變化而靈活改變。這能帶來更豐富的交互體驗，比如主題切換、動態效果等等。
解決方案
JS控制CSS變量的核心在于document.documentElement.style這個對象。通過它，我們可以讀取、修改CSS變量的值，從而改變元素的樣式。
方式一：直接修改 style 對象
立即學習“前端免費學習筆記（深入）”；
這是最直接的方式，通過setProperty方法來設置CSS變量的值。
// 獲取根元素 const root = document.documentElement; // 設置CSS變量 root.style.setProperty('--my-variable', 'red'); // 獲取CSS變量的值 const myVariable = getComputedStyle(root).getPropertyValue('--my-variable'); console.log(myVariable); // 輸出 "red"
這種方式簡單粗暴，但也很有效。需要注意的是，CSS變量名要以–開頭。
方式二：使用 CSSStyleDeclaration 對象
document.documentElement.style返回的是一個CSSStyleDeclaration對象，它提供了一些更方便的方法來操作樣式。
const root = document.documentElement; // 設置CSS變量 root.style.setProperty('--my-variable', '20px'); // 獲取CSS變量的值 console.log(root.style.getPropertyValue('--my-variable')); // 輸出 "20px"
這種方式和第一種方式本質上是一樣的，只是寫法上略有不同。
方式三：結合事件監聽器和函數
為了實現動態修改，通常需要結合事件監聽器，例如監聽鼠標移動、鍵盤輸入等事件，然后根據事件觸發的條件來修改CSS變量的值。
<!DOCTYPE html> <html> <head> <title>動態CSS變量</title> <style> :root { --bg-color: #f0f0f0; } body { background-color: var(--bg-color); transition: background-color 0.3s ease; } button { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; cursor: pointer; } </style> </head> <body> <button id="changeColorBtn">切換背景顏色</button> <script> const button = document.getElementById('changeColorBtn'); const root = document.documentElement; button.addEventListener('click', function() { // 隨機生成一個顏色值 const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16); root.style.setProperty('--bg-color', randomColor); }); </script> </body> </html>
這個例子監聽了按鈕的點擊事件，每次點擊都會隨機生成一個顏色值，并將其設置為–bg-color變量的值，從而動態改變頁面的背景顏色。
如何優雅地管理大量的CSS變量？
當項目變得復雜，CSS變量的數量也會增多。這時，就需要考慮如何更好地管理這些變量，避免代碼變得混亂。
一種方法是將CSS變量的定義和修改邏輯封裝成函數或模塊。例如，可以創建一個theme.js模塊，專門負責處理主題相關的CSS變量。
// theme.js const root = document.documentElement; export function setTheme(themeName) { switch (themeName) { case 'dark': root.style.setProperty('--text-color', '#fff'); root.style.setProperty('--bg-color', '#333'); break; case 'light': root.style.setProperty('--text-color', '#000'); root.style.setProperty('--bg-color', '#fff'); break; default: break; } }
然后在其他地方引入這個模塊，調用setTheme函數來切換主題。
import { setTheme } from './theme.js'; const themeButton = document.getElementById('themeButton'); themeButton.addEventListener('click', function() { const currentTheme = localStorage.getItem('theme') || 'light'; const newTheme = currentTheme === 'light' ? 'dark' : 'light'; setTheme(newTheme); localStorage.setItem('theme', newTheme); });
這樣做的好處是，將主題相關的邏輯集中管理，方便維護和擴展。
CSS變量動態修改的性能考量
雖然動態修改CSS變量很靈活，但也需要注意性能問題。頻繁地修改CSS變量可能會導致頁面重繪，影響用戶體驗。
為了優化性能，可以考慮以下幾點：
- 減少不必要的修改： 只有在必要的時候才修改CSS變量的值。
- 使用requestAnimationFrame： 將修改CSS變量的操作放在requestAnimationFrame回調函數中，可以避免瀏覽器頻繁重繪。
- 批量修改： 如果需要同時修改多個CSS變量，盡量一次性修改，而不是多次修改。
function updateStyles() { root.style.setProperty('--width', newWidth + 'px'); root.style.setProperty('--height', newHeight + 'px'); } requestAnimationFrame(updateStyles);
如何在不同的瀏覽器中兼容CSS變量？
雖然CSS變量已經被大多數現代瀏覽器支持，但在一些老舊的瀏覽器中可能無法正常工作。為了兼容這些瀏覽器，可以使用polyfill。
一個常用的polyfill是css-vars-ponyfill。它可以讓不支持CSS變量的瀏覽器也能使用CSS變量。
使用方法很簡單，只需要在頁面中引入css-vars-ponyfill的JavaScript文件即可。
<script src="https://cdn.jsdelivr.net/npm/css-vars-ponyfill@2"></script> <script> cssVars({}); </script>
需要注意的是，polyfill會增加頁面的加載時間，因此只在需要兼容老舊瀏覽器時才使用。
總的來說，JS控制CSS變量是一種強大的技術，可以實現各種各樣的動態效果。但也要注意管理好CSS變量，優化性能，并考慮兼容性問題。
