JS操作css變量的核心是使用setproperty和getpropertyvalue方法；1. 通過document.documentelement.style.setproperty(‘–variable’, ‘value’)可動態(tài)設(shè)置變量；2. 可用于動態(tài)主題切換，通過按鈕點擊修改主題顏色變量；3. 滾動時修改變量實現(xiàn)導(dǎo)航欄透明度漸變動畫；4. 數(shù)據(jù)可視化中動態(tài)設(shè)置柱狀圖高度；5. 響應(yīng)式設(shè)計中根據(jù)屏幕尺寸調(diào)整字體大小；6. 表單驗證時根據(jù)輸入有效性改變輸入框樣式。
簡單來說，JS操作css變量就是讓你的網(wǎng)頁動起來，讓樣式不再是死的，而是可以根據(jù)用戶的行為或者其他條件來改變。
解決方案
JS操作CSS變量，核心在于setProperty和getPropertyValue這兩個方法，它們分別用于設(shè)置和獲取CSS變量的值。但真正讓這個技術(shù)變得有趣的是它能實現(xiàn)的各種場景。
如何使用JS設(shè)置CSS變量？
最基礎(chǔ)的用法是這樣的：
立即學(xué)習(xí)“前端免費學(xué)習(xí)筆記（深入）”；
document.documentElement.style.setProperty('--my-variable', 'red');
這行代碼會把根元素（通常是）的–my-variable這個CSS變量設(shè)置為紅色。 你可以在CSS中這樣使用它：
body { background-color: var(--my-variable); }
現(xiàn)在，body的背景色就是紅色了。 關(guān)鍵是，你可以隨時用JS改變–my-variable的值，body的背景色也會隨之改變。
響應(yīng)用戶交互：動態(tài)主題切換
一個常見的場景是動態(tài)主題切換。 假設(shè)你有亮色和暗色兩種主題，用戶可以通過一個按鈕來切換。 你可以定義一些CSS變量來控制主題的顏色：
:root { --bg-color: #fff; --text-color: #000; } body { background-color: var(--bg-color); color: var(--text-color); }
然后，在JS中，根據(jù)用戶的選擇來改變這些變量的值：
const toggleButton = document.getElementById('theme-toggle'); toggleButton.addEventListener('click', () => { if (document.documentElement.style.getPropertyValue('--bg-color') === '#fff') { document.documentElement.style.setProperty('--bg-color', '#000'); document.documentElement.style.setProperty('--text-color', '#fff'); } else { document.documentElement.style.setProperty('--bg-color', '#fff'); document.documentElement.style.setProperty('--text-color', '#000'); } });
這樣，點擊按鈕就可以切換主題了。 這比直接修改CSS類名要靈活得多。
動畫效果：根據(jù)滾動位置改變元素樣式
另一個有趣的場景是根據(jù)滾動位置來改變元素的樣式。 比如，你可以讓導(dǎo)航欄在頁面滾動時逐漸變透明。
.navbar { background-color: rgba(255, 255, 255, var(--opacity)); transition: background-color 0.3s ease; }
在JS中，監(jiān)聽滾動事件，并根據(jù)滾動位置來改變–opacity的值：
window.addEventListener('scroll', () => { const scrollPosition = window.scrollY; const opacity = Math.min(1, scrollPosition / 500); // 滾動500px后完全不透明 document.documentElement.style.setProperty('--opacity', opacity); });
這樣，導(dǎo)航欄就會隨著滾動逐漸變透明了。 這種方法可以實現(xiàn)很多炫酷的動畫效果。
數(shù)據(jù)可視化：動態(tài)生成圖表
CSS變量還可以用于數(shù)據(jù)可視化。 假設(shè)你有一個數(shù)據(jù)數(shù)組，想要用柱狀圖來展示。 你可以定義一個CSS變量來控制柱狀圖的高度：
.bar { height: var(--bar-height); background-color: blue; }
然后，在JS中，根據(jù)數(shù)據(jù)來動態(tài)設(shè)置每個柱狀圖的–bar-height：
const data = [10, 20, 30, 40, 50]; const bars = document.querySelectorAll('.bar'); bars.forEach((bar, index) => { const height = data[index] * 2; // 根據(jù)數(shù)據(jù)計算高度 bar.style.setProperty('--bar-height', `${height}px`); });
這樣，你就可以根據(jù)數(shù)據(jù)動態(tài)生成柱狀圖了。 這種方法比用JS直接操作dom元素要高效得多。
響應(yīng)式設(shè)計：根據(jù)屏幕尺寸改變樣式
CSS變量也可以用于響應(yīng)式設(shè)計。 你可以用JS獲取屏幕尺寸，并根據(jù)屏幕尺寸來改變CSS變量的值：
function updateStyles() { const screenWidth = window.innerWidth; if (screenWidth < 768) { document.documentElement.style.setProperty('--font-size', '14px'); } else { document.documentElement.style.setProperty('--font-size', '16px'); } } window.addEventListener('resize', updateStyles); updateStyles(); // 初始化
這樣，當屏幕尺寸小于768px時，字體大小就會變成14px，否則就是16px。 這種方法可以讓你更靈活地控制響應(yīng)式樣式。
表單驗證：動態(tài)改變輸入框樣式
最后，CSS變量還可以用于表單驗證。 你可以根據(jù)輸入框的內(nèi)容來改變輸入框的樣式：
input:invalid { border-color: var(--invalid-color); }
在JS中，監(jiān)聽輸入框的input事件，并根據(jù)輸入框的內(nèi)容是否有效來改變–invalid-color的值：
const input = document.querySelector('input'); input.addEventListener('input', () => { if (input.checkValidity()) { document.documentElement.style.setProperty('--invalid-color', 'green'); } else { document.documentElement.style.setProperty('--invalid-color', 'red'); } });
這樣，當輸入框的內(nèi)容有效時，邊框就會變成綠色，否則就是紅色。 這種方法可以提供更好的用戶體驗。
總結(jié)
JS操作CSS變量是一個強大的技術(shù)，它可以讓你更靈活地控制網(wǎng)頁的樣式。 通過結(jié)合不同的場景，你可以創(chuàng)造出很多炫酷的效果。 記住，關(guān)鍵在于理解setProperty和getPropertyValue這兩個方法，以及如何將它們應(yīng)用到實際項目中。
