本文详细介绍如何在JavaScript中通过setProperty方法设置CSS自定义属性，以及利用getComputedStyle读取变量值。涵盖全局与局部变量修改、动态背景色切换等实战示例，帮助开发者实现灵活的页面交互效果。
前言
借助JavaScript操作CSS变量（即自定义属性）可实现样式的动态调整。CSS变量以双短横线前缀声明，如 --main-color: red;。JS中可通过 document.documentElement.style.setProperty 设置全局变量，或利用元素的 style.setProperty 方法处理局部定义的变量。
具体示例如下：
1. 全局设置CSS变量
若CSS变量 --main-color 定义于 :root 选择器内：
:root {
--main-color: red;
}
利用JavaScript修改该变量：
document.documentElement.style.setProperty('--main-color', 'blue');
此举将使所有引用 --main-color 的元素样式更新为蓝色。
2. 特定元素设置CSS变量
若CSS变量定义于特定元素，例如：
.my-element {
--border-color: black;
}
通过该元素的 style.setProperty 方法即可修改：
const element = document.querySelector('.my-element');
element.style.setProperty('--border-color', 'green');
3. 读取CSS变量值
亦可利用 getComputedStyle 方法获取CSS变量值：
const rootStyles = getComputedStyle(document.documentElement);
const mainColor = rootStyles.getPropertyValue('--main-color');
console.log(mainColor); // 输出 "blue"（假设之前已经被设置为蓝色）
4. 示例：动态切换背景颜色
完整示例演示如何通过按钮点击事件动态修改CSS变量值，进而改变页面背景色：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Variables with JavaScript</title>
<style>
:root {
--bg-color: lightblue;
}
body {
background-color: var(--bg-color);
}
</style>
</head>
<body>
<button id="changeColorBtn">Change Background Color</button>
<script>
const changeColorBtn = document.getElementById('changeColorBtn');
changeColorBtn.addEventListener('click', () => {
const newColor = prompt('Enter a new color:');
document.documentElement.style.setProperty('--bg-color', newColor);
});
</script>
</body>
</html>
此示例中，点击按钮后弹出提示框供用户输入新颜色值。随后JavaScript修改 :root 中的 --bg-color 变量，实现整个页面背景色的变更。
运用上述方法，可灵活利用JavaScript动态控制CSS变量值，达成丰富的交互效果。
附：JS修改CSS自定义变量
var root = document.querySelector(':root');
root.style.setProperty('--customHeight', "36px");总结
至此，关于通过js控制修改css变量的介绍完毕，更多相关js控制修改css变量内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！