JavaScript中的CSS自定义属性（变量）如何动态管理？-js教程-PHP中文网

JavaScript中的CSS自定义属性（变量）如何动态管理？

紅蓮之龍

发布： 2025-09-25 12:50:01

原创

1059人浏览过

CSS自定义属性可通过JavaScript动态管理，首先使用getComputedStyle()获取变量值，再通过setProperty()修改，实现主题切换、响应式字体等功能。例如设置data-theme属性可切换深色/浅色模式，所有引用变量的样式自动更新，操作简单且高效。

javascript中的css自定义属性（变量）如何动态管理？

JavaScript中动态管理CSS自定义属性（也叫CSS变量）非常灵活，主要通过操作元素的style属性来实现。这些变量通常在CSS中以--开头定义，可以通过JavaScript读取、设置和更新。

1. 什么是CSS自定义属性？

CSS自定义属性是在CSS中声明的变量，写法如下：

:root {
--primary-color: #007bff;
--font-size: 16px;
}

这些变量可以在整个页面中通过var(--variable-name)使用，比如：

body {
color: var(--primary-color);
font-size: var(--font-size);
}

2. 使用JavaScript获取CSS变量值

要获取某个元素上定义的CSS变量，需使用getComputedStyle()方法：

立即学习“Java免费学习笔记（深入）”；

const root = getComputedStyle(document.documentElement);
const primaryColor = root.getPropertyValue('--primary-color').trim();
console.log(primaryColor); // 输出: #007bff

这个方法获取的是计算后的值，适用于全局或局部定义的变量。

3. 使用JavaScript设置CSS变量值

通过setProperty()可以动态修改变量：

移动端UI&微信UI YDUI Touch

YDUI Touch专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高；使用 Flexbox 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局；用 rem 实现强大的屏幕适配布局，等比例适配所有屏幕；自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI。

查看详情

document.documentElement.style.setProperty('--primary-color', '#ff5733');
document.body.style.setProperty('--font-size', '18px');

这会立即生效，所有使用该变量的样式都会自动更新。

常见用途包括：

主题切换：点击按钮更改颜色主题
响应式字体：根据屏幕尺寸调整基础字号
用户偏好保存：记住用户选择的主题并重新应用

4. 实际示例：动态切换主题

HTML:

CSS:

:root {
  --bg-color: #fff;
  --text-color: #333;
}

body {
  background: var(--bg-color);
  color: var(--text-color);
}

[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #f1f1f1;
}

JavaScript:

function setTheme(theme) {
  if (theme === 'dark') {
    document.documentElement.setAttribute('data-theme', 'dark');
  } else {
    document.documentElement.removeAttribute('data-theme');
  }
}

这里通过切换data-theme属性触发不同变量集，实现主题动态管理。

基本上就这些，不复杂但容易忽略细节。

以上就是JavaScript中的CSS自定义属性（变量）如何动态管理？的详细内容，更多请关注php中文网其它相关文章！