CSS自定义属性 通过js修改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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值