CSS变量的声明和修改

CSS变量描述

复杂的网站都会有大量的 CSS 代码，通常也会有许多重复的值。举个例子，同样一个颜色值可能在成千上百个地方被使用到，如果这个值发生了变化，需要全局搜索并且一个一个替换（很麻烦～）。自定义属性在某个地方存储一个值，然后在其他许多地方引用它。

CSS变量的声明

CSS 变量的声明一般都是在根元素上面声明，确保根元素下的所有元素都可以访问到这个 CSS 的自定义属性。这里根元素使用 :root 来表示，也可以在其他元素上面声明自定义属性，比如 div、p… 标签，如果是在非根元素下声明的 CSS 属性，则只能在当前声明元素上使用。

// 在根元素上面声明
 :root {
      --red: red;
    }
// 在 p 标签下声明
// ! 如果是在非根元素上面声明的变量, 只能在声明的标签或者class中使用
  p {
    --blue: blue;
  }

CSS变量的使用

使用 CSS 变量的时候需要用到一个var的方法，这个方法提供两个参数（ CSS 变量名，默认值），当无法读取对应的 CSS 变量时就会取后面这个默认值。

// 使用根元素的变量
    div {
      color: var(--red);
    }
 // 使用标签内的变量
    p {
      color: var(--blue);
    }
// 当我们无法取到某个 CSS 变量时, var 方法的第二个参数会成为他的值
    span {
      color: var(--yello, skyblue)
    }

执行效果

通过我们配置的 CSS 变量的使用中可以看到
我们在根元素上面设置的 --red 属性生效了并且在 P 标签上面可以通过 var() 的方法访问到这个属性
P 标签 --> 蓝色
因为我们在所有 P 标签下面声明了一个名为 --blue 的变量所以，所以 P 标签可以访问到这个 CSS变量
DIV 标签 --> 红色
因为我们在所有 DIV 标签下面声明了一个名为 --red 的变量所以，所以 DIV 标签可以访问到这个 CSS变量
SPAN标签 --> 浅蓝色
当我们使用 var() 方法传入一个不存在并且无法找到的 CSS 变量名的时候，他会默认去第二个参数来进行赋值，所以显示浅蓝色，如果没有设置第二个属性则会走全局的默认属性。

CSS变量的修改

当我们创建一个 CSS 变量的时候，这个 CSS 变量会被创建到目标元素的下面的.style 里面，我们需要用 DOM 操作去获取这个元素。
使用 getPropertyValue 和 setProperty方法去访问和修改 CSS 变量。

document.documentElement.style.getPropertyValue('--red') // red
document.documentElement.style.setProperty('--red', 'green') // --red ==> green