CSS自定义属性(也称为CSS变量)的设置和获取在CSS和JavaScript中都有不同的方法。下面分别介绍如何在CSS中设置自定义属性,以及如何在JavaScript中设置和获取这些属性。
在CSS中设置自定义属性
在CSS中,自定义属性是通过在选择器内部使用--
前缀来声明的。这些属性通常定义在:root
伪类中,以便在整个文档范围内使用,但也可以定义在任何其他选择器中以限制其作用域。
在JavaScript中设置和获取自定义属性
设置自定义属性
在JavaScript中,你可以使用element.style.setProperty()
方法来设置自定义属性的值。这个方法接受三个参数:属性名(不带--
前缀)、值和一个可选的优先级字符串(如'important'
)。
获取自定义属性
要获取自定义属性的值,你可以使用window.getComputedStyle()
方法结合getPropertyValue()
方法。注意,获取自定义属性时需要包括--
前缀。
在HTML标签中设置CSS自定义属性
在HTML标签中设置CSS自定义属性的方法和在HTML标签中设置普通的CSS属性的方法是一样的,直接将要设置的属性写在style属性中即可,例如:
注意事项
- 当你使用
element.style.setProperty()
设置自定义属性时,这些属性将直接应用于元素的style
对象,但它们不会出现在CSS规则中,也不会被element.style
直接列出(因为element.style
只反映内联样式)。但是,getComputedStyle()
能够获取到这些值。 - 自定义属性名(包括
--
前缀)在getPropertyValue()
方法中是必需的。 - 自定义属性在CSS中定义时,其作用域遵循CSS的选择器规则。在JavaScript中设置时,它们通常被视为内联样式,但可以通过
getComputedStyle()
在文档中的任何地方查询。 - 自定义属性是区分大小写的,因此在JavaScript中设置和获取时需要注意。