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这两个方法，以及如何将它们应用到实际项目中。
