CSS3 使用 JavaScript 更改变量
CSS3 使用 JavaScript 更改变量
CSS 变量可以访问 DOM,这意味着您可以通过 JavaScript 更改它们。
这个例子说明了如何创建脚本来显示并更改上一页中使用的示例中的 --blue 变量。此刻,如果您不熟悉 JavaScript,不要担心。您可以在我们的 JavaScript 教程中学到有关 JavaScript 的更多知识:
实例
<script>
var r = document.querySelector(':root');
function myFunction_get() {
var rs = getComputedStyle(r);
alert("The value of --blue is: " + rs.getPropertyValue('--blue'));
}
function myFunction_set() {
r.style.setProperty('--blue', 'lightblue');
}
</script> 亲自试一试 »浏览器支持
表格中的数字注明了完全支持 var() 函数的首个浏览器版本。
| 函数 | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS3 var() Function
| 属性 | 描述 |
|---|---|
| var() | 插入 CSS 变量的值。 |
