CSS var() 自定义的属性值和使用
2023-08-06 本文已影响0人
keknei
声明全局css变量，必须得在:root中声明
:root是一个css伪类，匹配文档树的根源素，对于HTML来说，:root表示<html>元素，和html选择器相同，但是优先级更高。
css var(custom-property-name, value)的语法
-
custom-property-name：是必须传的，也必须得是--开头的css属性变量 -
value：可选，在属性不存在的时候使用，默认值或者备用值
举个css全局设置自定义变量例子
css
:root{
--textColor: red;
}
.box{
text-align:center;
font-size:14px;
}
.text{
color:var(--textColor);
margin:0;
}
html
<body>
<div class="box">
<div>我是正常的文字</div>
<p class="text">我是一段文字</p>
</div>
</body>
在html标签上设置css全局变量的属性值
css
.text{
color:var(--textColor);
font-size:var(--fontSize);
margin:0;
}
html
<p class="text" style="--fontSize:30px;">我是一段文字</p>
使用js修改自定义属性值或设置自定义属性
style.setProperty(propertyName, value, priority);
-
propertyNamecss中使用的--开头自定义变量 -
value（可选） 设置自定义变量的值 -
priority（可选） 设置"important" CSS优先级。如果没有指定，则当作空字符串
css
.box>div{
padding-bottom:var(--paddingBottom20);
}
html
<body>
<div class="box">
<div>我是正常的文字</div>
<p class="text" style="--fontSize:30px;">我是一段文字</p>
</div>
</body>
js
document.documentElement.style.setProperty("--paddingBottom20", "20px");
效果如图所示
css全局声明变量
