CSS变量(CSS Variables)

╰+攻爆jí腚メ 2023-03-03 11:25 146阅读 0赞

## 概述 ##

如果突然有一天,当你页面的主题色发生变化时,有许多元素的颜色要一起变化,这是你会考虑怎么做呢?使用Less/Sass/Stylus来定义一个颜色变量?还是专门去定义多了个类名来控制元素?  
       使用第一种方法,有他的弊端,浏览器无法识别CSS预处理器的语法,所以我们都会将Less/Sass/Stylus的文件编译成CSS文件,这样的话就无法再去修改CSS预处理器中变量的值了,因为我们的页面中根本没有Less等CSS预处理器文件  
       使用第二种方法,也有弊端,如果一个元素是字体颜色为blue,另一个元素是背景颜色为blue,那这时候就要取多个类名才能实现,这样太不方便了  
       说完了上面这两种方法的弊端,那我们就要介绍一下今天的主角:CSS变量(英文CSS Variables,官方取名为自定义属性或者级联变量)

## 一.什么是CSS变量 ##

CSS 变量当前有两种形式：

变量，就是拥有合法标识符和合法的值。我们可以通过使用var()函数来使用变量。例如：var(–example-variable)会返回–example-variable所对应的值

自定义属性。这些属性使用–where的特殊格式作为名字。例如–example-variable: 20px;这段代码意味着将20px赋值给–example-varibale变量。

注意：  
1.在之前的标准中，自定义属性以var-作为前缀，后来才改成–前缀。Firefox 31和以后的版本遵循新标准。  
2.自定义属性和常规属性一样，作用在当前的层级，若没有定义，则从其父元素继承其值。

## 二.为什么要使用CSS变量 ##

在构建大型站点时，作者通常会面对可维护性的挑战。在这些网页中， 所使用的 CSS 的数量是非常庞大的，并且在许多场合大量的信息会重复使用。例如，在网页中维护一个配色方案，意味着一些颜色在CSS文件中多次出现，并被重复使用。当你修改配色方案时，不论是调整某个颜色或完全修改整个配色，都会成为一个复杂的问题，不容出错，而单纯查找替换是远远不够的。  
       如果使用了 CSS 框架，这种情况会变得尤其糟糕，此时如果要修改颜色，则需要对框架本身进行修改。在这些场合使用 LESS 或 Sass 类似的预处理器是非常有帮助的，但是这种通过添加额外步骤的方式，可能会增加系统的复杂性。CSS变量为我们带来一些预处理器的便利，并且不需要额外的编译。  
       这些变量的第二个优势就是名称本身就包含了语义的信息。CSS 文件变得易读和理解。main-text-color比文档中的\#00ff00更容易理解，特别是同样的颜色出现在不同的文件中的时候。

## 三.怎么使用CSS变量 ##

#### 初始样式: ####

#box1{ 
                width:200px;
                height: 200px;
                border: 1px solid;
                color:blue;
            }
            #box2{ 
                width:200px;
                height: 200px;
                border: 1px solid;
                background-color:blue;
                color:white;
            }

#### 页面结构: ####

<div id="box1">
            这是box1
        </div>
        <div id="box2">
            这是box2
        </div>

#### 页面效果: ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Noa3N0YXJ0_size_16_color_FFFFFF_t_70]

### 1.定义CSS变量 ###

这时候我们来定义一个CSS变量,变量值为blue

:root{ 
                --global-color:blue;
            }

在style标签中首先声明一个全局伪元素:root,然后在内部声明变量名及其变量值  
注意:变量名一定要–开头

到这里我们成功定义了CSS变量,接下来我们来看下如何使用CSS变量

### 2.使用CSS变量 ###

我们使用上面定义的变量分别替换掉\#box1元素的color属性的值和\#box2元素的background-color属性的值

:root{ 
                --global-color:blue;
            }
            #box1{ 
                width:200px;
                height: 200px;
                border: 1px solid;
                color:var(--global-color);
            }
            #box2{ 
                width:200px;
                height: 200px;
                border: 1px solid;
                background-color:var(--global-color);
                color:white;
            }

使用起来虽然没有Less等CSS预处理器那么简单,但是还是比较方便的  
语法:CSS属性名:var(CSS变量名)  
注意:CSS变量名是包括了—的,千万别漏了

到这里我们已经看完了CSS变量的定义和使用,那接下来我们再来看看怎么修改CSS变量的值

### 3.修改CSS变量 ###

在我们的页面中,如果想要动态修改CSS变量的值,我们需要借助到JavaScript来实现

//找到html标签
        var htmlNode=document.documentElement;
        //将html标签(根标签)的CSS变量(--global-color)的值修改为red
        htmlNode.style.setProperty("--global-color", "red");

修改前:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Noa3N0YXJ0_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Noa3N0YXJ0_size_16_color_FFFFFF_t_70 2]  
修改后:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Noa3N0YXJ0_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][20200731113917661.png]

此时我们可以很明显的看到html标签上多了一个标签属性style,内部是我们修改的CSS变量及其变量值,到这里就修改成功了  
语法:DOM对象.style.setProperty(CSS变量名,修改后的CSS变量值)  
注意:修改时不能使用(DOM对象.style\[CSS变量名\]=变量值)的语法进行修改,例如:htmlNode.style\["–global-color"\]=“red”,此方法无效

### 4.读取CSS变量 ###

在我们的JavaScript代码中,时常会需要去读取CSS变量的值,那我们来看下如何读取CSS变量的值

//找到html标签
        var htmlNode=document.documentElement;
        //将html标签(根标签)的CSS变量(--global-color)的值修改为red
        htmlNode.style.setProperty("--global-color", "red"); 
    
        //读取html标签(根标签)的CSS变量(--global-color)的值,并在控制台中打印
        // var value=htmlNode.style.getPropertyValue('--global-color');
        var value=getComputedStyle(htmlNode)['--global-color'];
        console.log(value)

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Noa3N0YXJ0_size_16_color_FFFFFF_t_70]: /images/20230208/b30b04e44d394fd1820b4ce0d9b39461.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Noa3N0YXJ0_size_16_color_FFFFFF_t_70 1]: /images/20230208/68f1a95d2bfe4491a1534843ca0b884a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Noa3N0YXJ0_size_16_color_FFFFFF_t_70 2]: /images/20230208/7479fcdb86af4a6f8083677138ed1373.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Noa3N0YXJ0_size_16_color_FFFFFF_t_70 3]: /images/20230208/a274aabb2c6941d392572e05896956ad.png
[20200731113917661.png]: /images/20230208/e6130340a3db4a0b97110e5ee94ff03c.png