JS操作css变量的核心是使用setproperty和getpropertyvalue方法；1. 通过document.documentelement.style.setproperty(‘–variable’, ‘value’)可动态设置变量；2. 可用于动态主题切换，通过按钮点击修改主题颜色变量；3. 滚动时修改变量实现导航栏透明度渐变动画；4. 数据可视化中动态设置柱状图高度；5. 响应式设计中根据屏幕尺寸调整字体大小；6. 表单验证时根据输入有效性改变输入框样式。
简单来说，JS操作css变量就是让你的网页动起来，让样式不再是死的，而是可以根据用户的行为或者其他条件来改变。
解决方案
JS操作CSS变量，核心在于setProperty和getPropertyValue这两个方法，它们分别用于设置和获取CSS变量的值。但真正让这个技术变得有趣的是它能实现的各种场景。
如何使用JS设置CSS变量？
最基础的用法是这样的：
立即学习“前端免费学习笔记（深入）”；
document.documentElement.style.setProperty('--my-variable', 'red');
这行代码会把根元素（通常是）的–my-variable这个CSS变量设置为红色。 你可以在CSS中这样使用它：
body { background-color: var(--my-variable); }
现在，body的背景色就是红色了。 关键是，你可以随时用JS改变–my-variable的值，body的背景色也会随之改变。
响应用户交互：动态主题切换
一个常见的场景是动态主题切换。 假设你有亮色和暗色两种主题，用户可以通过一个按钮来切换。 你可以定义一些CSS变量来控制主题的颜色：
:root { --bg-color: #fff; --text-color: #000; } body { background-color: var(--bg-color); color: var(--text-color); }
然后，在JS中，根据用户的选择来改变这些变量的值：
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类名要灵活得多。
动画效果：根据滚动位置改变元素样式
另一个有趣的场景是根据滚动位置来改变元素的样式。 比如，你可以让导航栏在页面滚动时逐渐变透明。
.navbar { background-color: rgba(255, 255, 255, var(--opacity)); transition: background-color 0.3s ease; }
在JS中，监听滚动事件，并根据滚动位置来改变–opacity的值：
window.addEventListener('scroll', () => { const scrollPosition = window.scrollY; const opacity = Math.min(1, scrollPosition / 500); // 滚动500px后完全不透明 document.documentElement.style.setProperty('--opacity', opacity); });
这样，导航栏就会随着滚动逐渐变透明了。 这种方法可以实现很多炫酷的动画效果。
数据可视化：动态生成图表
CSS变量还可以用于数据可视化。 假设你有一个数据数组，想要用柱状图来展示。 你可以定义一个CSS变量来控制柱状图的高度：
.bar { height: var(--bar-height); background-color: blue; }
然后，在JS中，根据数据来动态设置每个柱状图的–bar-height：
const data = [10, 20, 30, 40, 50]; const bars = document.querySelectorAll('.bar'); bars.forEach((bar, index) => { const height = data[index] * 2; // 根据数据计算高度 bar.style.setProperty('--bar-height', `${height}px`); });
这样，你就可以根据数据动态生成柱状图了。 这种方法比用JS直接操作dom元素要高效得多。
响应式设计：根据屏幕尺寸改变样式
CSS变量也可以用于响应式设计。 你可以用JS获取屏幕尺寸，并根据屏幕尺寸来改变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。 这种方法可以让你更灵活地控制响应式样式。
表单验证：动态改变输入框样式
最后，CSS变量还可以用于表单验证。 你可以根据输入框的内容来改变输入框的样式：
input:invalid { border-color: var(--invalid-color); }
在JS中，监听输入框的input事件，并根据输入框的内容是否有效来改变–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'); } });
这样，当输入框的内容有效时，边框就会变成绿色，否则就是红色。 这种方法可以提供更好的用户体验。
总结
JS操作CSS变量是一个强大的技术，它可以让你更灵活地控制网页的样式。 通过结合不同的场景，你可以创造出很多炫酷的效果。 记住，关键在于理解setProperty和getPropertyValue这两个方法，以及如何将它们应用到实际项目中。
