CSS 自定义属性(即CSS变量) “var()” 和 “:root”

本文由清尘发表于2021-03-25 17:56最后修改于2021-04-26属于HTML/CSS分类

示例:

:root {
  --bg-color: #3a3a3a;
}

body {
  background-color: var(--bg-color);
}

var()

var()函数用于插入CSS变量的值。

:root
:root是一个伪类,表示文档根元素,非IE及ie8及以上浏览器都支持,在:root中声明相当于全局属性,只要当前页面引用了:root segment所在文件,都可以使用var()来引用

传统方式:

以下示例显示了在样式表中定义某些颜色的传统方式(通过为每个特定元素定义要使用的颜色):

body { background-color: #1e90ff; }

h2 { border-bottom: 2px solid #1e90ff; }

.container {
  color: #1e90ff;
  background-color: #ffffff;
  padding: 15px;
}

button {
  background-color: #ffffff;
  color: #1e90ff;
  border: 1px solid #1e90ff;
  padding: 5px;
}

var()函数的语法

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}

body { background-color: var(--blue); }

h2 { border-bottom: 2px solid var(--blue); }

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

var()函数的语法

该var()函数用于插入CSS变量的值。

该var()函数的语法如下:

var(name, value)

注意:变量名必须以两个破折号(-)开头,并且区分大小写!

var()如何工作

首先:CSS变量可以具有全局范围或局部范围。

全局变量可以在整个文档中访问/使用,而局部变量只能在声明它的选择器内部使用。

要创建具有全局作用域的变量,请在:root 选择器中声明它。在:root选择文档的根元素相匹配。

要创建具有局部作用域的变量,请在将要使用它的选择器中声明它。

下面的示例与上面的示例相同,但是在这里我们使用该var()函数。

首先,我们声明两个全局变量(–blue和–white)。然后,我们使用该 var()函数稍后在样式表中插入变量的值

使用var()的优点是:

使代码更易于阅读(更易于理解)
使更改颜色值更加容易
要将蓝色和白色更改为较柔和的蓝色和白色,您只需要更改两个变量值

javascript获取自定义属性

    var rootElement = document.documentElement;
    var styles = getComputedStyle(rootElement);
    var mainColor = styles.getPropertyValue('--color-text');
    console.log(String(mainColor).trim())

javascript设置自定义属性

    var rootElement = document.documentElement;
    rootElement.style.setProperty('--color-text','#ccc');