使用 JavaScript 更改 CSS 变量
使用 JavaScript 更改变量
CSS 变量可以访问 DOM，这意味着您可以使用 JavaScript 来更改它们。
以下是如何创建一个脚本来显示和更改之前页面示例中使用的 --blue 变量。目前，如果您不熟悉 JavaScript，请不用担心。您可以在我们的 JavaScript 教程 中了解更多关于 JavaScript 的信息。
示例
<script>
// 获取根元素
var r = document.querySelector(':root');
// 创建一个用于获取变量值的函数
function myFunction_get() {
// 获取根元素（属性和值）的样式
var rs = getComputedStyle(r);
// 弹出 --blue 变量的值
alert("The value of --blue is: " + rs.getPropertyValue('--blue'));
}
// 创建一个用于设置变量值的函数
function myFunction_set() {
// 将 --blue 变量的值设置为另一个值（在本例中为“lightblue”）
r.style.setProperty('--blue', 'lightblue');
}
</script>
自己动手试一试 »
浏览器支持
表中的数字表示完全支持 var() 函数的第一个浏览器版本。
| 函数 | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS var() 函数
| 属性 | 描述 |
|---|---|
| var() | 插入 CSS 变量的值 |
