当前位置: article > 正文

CSS var() 自定义的属性值和使用_css var(value,value)

作者：2023面试高手 | 2024-02-15 13:20:17

踩

css var(value,value)

声明全局 CSS 变量

:root{
	<自定义属性名>: <自定义属性值>;
}
1
2
3

自定义属性名必需以 -- 开头。

:root

:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 <html> 元素，除了优先级更高之外，与 html 选择器相同。

var() 函数

var() 函数用于插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用。
支持版本：CSS3

css语法：

var(custom-property-name, value)
1

custom-property-name：必需。自定义属性的名称，必需以 -- 开头。
value：可选。备用值，在属性不存在的时候使用。
1
2

使用实例：

css：

:root{
	--bg-color: blue;
}
.a{
    background: var(--bg-color);
    width: 40px;
    height: 40px;
}
1
2
3
4
5
6
7
8

html：

<div class="a"></div>
1

运行效果：
在这里插入图片描述

除了可以在css自定义属性，也可以通过js动态自定义属性或修改属性值

使用js修改自定义属性值或设置自定义属性

CSSStyleDeclaration.setProperty()

使用CSSStyleDeclaration.setProperty() 方法接口为一个声明了 CSS 样式的对象设置一个新的值。

语法：

style.setProperty(propertyName, value, priority);
1

propertyName：创建或被更改的 CSS 属性。
value（可选）：属性值。如果没有指定，则当作空字符串。
priority（可选）：设置 "important" CSS 优先级。如果没有指定，则当作空字符串。
1
2
3

使用实例：

css：

.b{
 	background: var(--bg-color2);
    width: 40px;
    height: 40px;
}
1
2
3
4
5

html：

<div class="b"></div>
<script type="text/javascript">
// 使用 js 自定义属性
window.document.documentElement.style.setProperty("--bg-color2", "red");
</script>
1
2
3
4
5

运行效果：
在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/84824