CSS自定义属性(也称为CSS变量)的设置和获取在CSS和JavaScript中都有不同的方法。下面分别介绍如何在CSS中设置自定义属性,以及如何在JavaScript中设置和获取这些属性。
在CSS中设置自定义属性
在CSS中,自定义属性是通过在选择器内部使用--
前缀来声明的。这些属性通常定义在:root
伪类中,以便在整个文档范围内使用,但也可以定义在任何其他选择器中以限制其作用域。
:root {
--main-bg-color: coral;
--padding-size: 10px;
}
.container {
--container-bg-color: lightblue; /* 只在这个容器内有效 */
}
在JavaScript中设置和获取自定义属性
设置自定义属性
在JavaScript中,你可以使用element.style.setProperty()
方法来设置自定义属性的值。这个方法接受三个参数:属性名(不带--
前缀)、值和一个可选的优先级字符串(如'important'
)。
// 设置全局自定义属性
document.documentElement.style.setProperty('--main-bg-color', 'pink');
// 设置特定元素的自定义属性
var container = document.querySelector('.container');
container.style.setProperty('--container-bg-color', 'skyblue');
获取自定义属性
要获取自定义属性的值,你可以使用window.getComputedStyle()
方法结合getPropertyValue()
方法。注意,获取自定义属性时需要包括--
前缀。
// 获取全局自定义属性
var mainBgColor = getComputedStyle(document.documentElement).getPropertyValue('--main-bg-color');
console.log(mainBgColor); // 输出: pink
// 获取特定元素的自定义属性
var containerBgColor = getComputedStyle(container).getPropertyValue('--container-bg-color');
console.log(containerBgColor); // 输出: skyblue
在HTML标签中设置CSS自定义属性
在HTML标签中设置CSS自定义属性的方法和在HTML标签中设置普通的CSS属性的方法是一样的,直接将要设置的属性写在style属性中即可,例如:
<div style="--color: deepskyblue;">
<img src="1.jpg" style="border: 10px solid var(--color);">
</div>
注意事项
- 当你使用
element.style.setProperty()
设置自定义属性时,这些属性将直接应用于元素的style
对象,但它们不会出现在CSS规则中,也不会被element.style
直接列出(因为element.style
只反映内联样式)。但是,getComputedStyle()
能够获取到这些值。 - 自定义属性名(包括
--
前缀)在getPropertyValue()
方法中是必需的。 - 自定义属性在CSS中定义时,其作用域遵循CSS的选择器规则。在JavaScript中设置时,它们通常被视为内联样式,但可以通过
getComputedStyle()
在文档中的任何地方查询。 - 自定义属性是区分大小写的,因此在JavaScript中设置和获取时需要注意。