如何在CSS中使用和修改变量

CSS变量的定义、应用和更新方法

要定义一个 CSS 变量，需要使用 -- 前缀，例如：

:root {
  --main-color: #ff0000;
  --font-size: 16px;
}

这里使用了 :root 伪类选择器，表示文档的根元素，也就是 <html> 元素。这样可以让变量在全局范围内有效。当然，也可以在其他选择器中定义变量，这样就可以限制变量的作用域

要使用一个 CSS 变量，需要使用 var() 函数，例如：

h1 {
  color: var(--main-color);
  font-size: var(--font-size);
}

这样就可以让 <h1> 元素的颜色和字体大小与变量的值一致。如果变量的值发生了改变，那么所有引用了该变量的元素的样式也会自动更新

要修改一个 CSS 变量的值，可以使用 setProperty() 方法，例如：

1	document.documentElement.style.setProperty('--main-color', '#00ff00');

这样就可以把 --main-color 变量的值改为绿色。注意，这里需要使用 document.documentElement 来获取根元素的样式对象

本文作者: Ymkiux
版权声明: 本网站所有文章除特别声明外,均采用CC BY-NC-ND 4.0许可协议。转载请注明出处!