CSS 变量

原创已于 2022-10-03 21:35:26 修改 · 2.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

于 2022-10-03 21:33:36 首次发布

前端专栏收录该内容

7 篇文章

订阅专栏

CSS 变量

1.何为CSS 变量

CSS 变量可以看成自定义属性，CSS 变量定义需要在属性名前添加 ‘–’双横线，CSS 变量的定义和 CSS 属性的书写基本一致。

作用：可以将网页中多次重复使用的字体，字体大小，背景颜色、主题色等用 CSS 变量定义，方便后期修改，降低修改量。

p {
     color：#ff0; // CSS 原有属性
     --bgc:teal; // CSS 变量 == 自定义属性
}

2. CSS 变量定义位置和使用范围

在 :root{ } 中集体定义 CSS 变量并赋值，:root 类似于根标签，里面的 CSS 变量全局可用；
在某个元素选择器当中定义并赋值；只能在元素及其后代元素中使用；

<style>
    :root { //该作用域下的 css 变量全局可用
         --bgc:#aee8d6; 
    } 
    .box {
        --mycolor:red; //在 .box 中定义 只在 .box 元素及其后代元素上生效
    }
    .box p {
        color: var(--mycolor); // p 元素是 .box 元素的子代元素，css 变量生效
        background-color: var(--bgc);
    }
    h1 {
        color: var(--mycolor); //字体颜色为黑色，--mycolor未生效，因为--mycolor 在 .box 中定义，.box 与 h1 平级，不属于 .box 元素及其后代元素
        background-color: var(--bgc);
    }
</style>

<body>
    <div class="box">
        <p>子代元素</p>
    </div>
    
    <h1>兄弟元素</h1>
</body>

在这里插入图片描述

3. CSS 变量使用

CSS 变量用 var( ) 包裹充当属性值使用：属性名: var( CSS变量 )；

如果 var( ) 当中有第二个参数，在第一个参数（css 变量）没有定义的前提下，可以充当属性值；
如果已经定义，第二个参数作为属性值是不生效的，属性值以已经定义时的值为准。

p {
     background-color: var(--bgc); // CSS 变量的使用，var()函数
     font-family：var（--myfont，'行楷'）; //由于 --myfont 之前没定义过，所以 --myfont 的属性值为 '行楷'
     font-size：var(--fontsize,30px); // --fontsize 已经定义过了，第二个参数不生效，以定义时的值为准，因此，--fontsize = 20px
}

:root { //统一定义 CSS 变量
		--bgc:teal;
		--fontsize：20px；
}

4. CSS变量的属性值

CSS 变量的属性值有以下几种：

和 CSS 属性值一样：#eaee0f，teal，20px …
字符串：–txt = ‘羽生结弦’；
数字： --num = 20；

数字类型的属性值转换为带单位的属性值：通过 calc( ) 加上单位，如：calc( var(--num) * 1px ) = 20px

5. JS 中获取或设置 CSS 变量

JS 中可以获取或设置 CSS 变量
获取：

获取选择器，如：document.querySelector(‘:root’);
通过全局方法window.getComputedStyle( ) ，获取元素的最终样式，包括内联，外部，嵌入（注：ele.style 获取的是元素的内联样式);
通过 getPropertyValue( css 变量); 获取该 css 变量的属性值；

let root = document.querySelector(':root'); // 获取 :root 选择器
let style = getComputedStyle(root); 
let con = style.getPropertyValue('--content'); // :root { --content:'羽生结弦'；}

设置：

获取选择器，如：document.querySelector(‘:root’);
root.style.setProperty(‘css 变量’,‘属性值’); (可以用来修改颜色好使，修改别的类型的属性值不好用，有知道原因的小伙伴可以留言dd我！)

let root = document.querySelector(':root') //:root { --bgc:skyblue;}
let style = getComputedStyle(root);
root.style.setProperty('--bgc','teal'); // --bgc 的值由 skyblue 改为 teal
let con = style.getPropertyValue('--content');