使用 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 变量的值 |
