js自定义属性

helei 2020-6-6 586 6/6

理解 :root 和 var()

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

css

:root {
    --view-height: 0;
}

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

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

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

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

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

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

使用JavaScript更改CSS自定义属性

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

- THE END -

helei

6月06日16:28

最后修改：2020年6月6日

非特殊说明，本博所有文章均为博主原创。