CSS自定义属性通过js修改css变量的值

最新推荐文章于 2024-06-05 14:53:46 发布

weixin_38168918

最新推荐文章于 2024-06-05 14:53:46 发布

阅读量4.9k

点赞数 3

文章标签：数据库

原文链接：http://www.cnblogs.com/hzz-/p/11464767.html

版权

自定义属性是一个名称以两个连字符（ - ）开头的属性，如 --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 }

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

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

转载于:https://www.cnblogs.com/hzz-/p/11464767.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

关注关注