CSS自定义属性 使用JavaScript更改CSS自定义属性

理解 :root 和 var()

自定义属性是一个名称以两个连字符（ - ）开头的属性，如 --foo。 定义后可以使用 var() 引用的变量。

css

1 :root {
2    --view-height: 0;
3 }

在:root选择器中定义自定义属性意味着它们可以作用于全局文档中所有元素。:root是一个CSS伪类，它匹配文档的根元素 – <html>元素。它类似于 html 选择器，但具有更高的优先级。

您可以在文档中的任何位置访问 :root 中的自定义属性的值：

1 div {
2    height: calc(var(--view-height) - 10px);
3 }

您还可以在CSS变量中包含回退值。例如：

 

1 div {
2   height: var(--view-height, 100px);
3 }

如果未定义自定义属性，则使用其回退值代替。

 

使用JavaScript更改CSS自定义属性

1 const vh = document.documentElement.clientHeight;
2 document.documentElement.style.setProperty('--view-height', vh+'px');

 

 

参考链接:https://www.html.cn/archives/9598

posted @ 2019-09-05 11:25  洪zz  阅读(5820)  评论(0)  编辑  收藏  举报