js如何操作CSS变量 js动态操作CSS变量的5种场景-js教程-PHP中文网

js如何操作CSS变量 js动态操作CSS变量的5种场景

冰火之心

发布： 2025-06-23 15:39:02

原创

564人浏览过

js操作css变量的核心是使用setproperty和getpropertyvalue方法；1. 通过document.documentelement.style.setproperty('--variable', 'value')可动态设置变量；2. 可用于动态主题切换，通过按钮点击修改主题颜色变量；3. 滚动时修改变量实现导航栏透明度渐变动画；4. 数据可视化中动态设置柱状图高度；5. 响应式设计中根据屏幕尺寸调整字体大小；6. 表单验证时根据输入有效性改变输入框样式。

js如何操作CSS变量 js动态操作CSS变量的5种场景

简单来说，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');
  }
});

登录后复制

这样，当输入框的内容有效时，边框就会变成绿色，否则就是红色。这种方法可以提供更好的用户体验。