CSS--自定义属性--使用/教程/实例

迷南。 2023-10-01 10:11 1阅读 0赞

原文网址：[CSS--自定义属性--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][CSS--_--_IT_-CSDN]

## 简介 ##

**说明**

本文用示例介绍CSS自定义属性的方法。

带`--`前缀的属性名表示带有值的自定义属性，比如--example--name，可通过 [var][] 函数在全文档范围内复用。

自定义属性在light DOM与shadow DOM都可见。（非自定义属性只在light DOM可见）。

**官网**

[自定义属性 (--\*)：CSS变量 - CSS（层叠样式表） | MDN][_--_CSS_ - CSS_ _ MDN]  
[使用CSS自定义属性（变量） - CSS（层叠样式表） | MDN][CSS_ - CSS_ _ MDN]

**自定义属性的好处**

网站的CSS代码通常有许多重复的值，例：同一颜色值可能在多个地方被用到，如果这个值发生了变化，需要全局搜索并且一个一个替换（很麻烦）。

好处1：自定义属性可以在某个地方存储一个值，然后在其他许多地方引用它。

好处2：语义化的标识。比如，--main-text-color 会比 \#00ff00 更易理解。

**大小写**

自定义属性大小写敏感，比如：--main-text-color和--MAIN-TEXT-COLOR是不一样的。

## 示例 ##

<!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>This is title</title>
        <style>
            :root {
                --my-green: #c3e6c8;
                --my-pink: #fed7d7;
            }
    
            #my-green-test {
                /*若未定义变量，则使用green这个默认值*/
                background-color: var(--my-green, green);
            }
    
            #my-pink-test {
                /*若未定义变量，则使用yellow这个默认值*/
                background-color: var(--my-pink, yellow);
            }
    
        </style>
    </head>
    
    <body>
    
    <div id="my-green-test">
        测试自定义的绿色效果
    </div>
    
    <div id="my-pink-test">
        测试自定义的粉红效果
    </div>
    
    <script>
    </script>
    </body>
    </html>

结果

![80b0c6e2f9514752b15951fe8ddba6bf.png][]

## 作用域 ##

**作用于全局**

:root选择器作用于全局，HTML文件内所有元素都可以引用它。

比如：

:root {
    	--my-green: #c3e6c8;
    	--my-pink: #fed7d7;
    }
    
    div {
        background-color: var(--my-green);
    }

**作用于此节点里边的节点**

假如html结构是这样的：

<div class="container">
        <div class="test-a">
            这是test-a
        </div>
    </div>

就可以这样控制class为test-a的背景色

.container {
    	--my-green: #c3e6c8;
    	--my-pink: #fed7d7;
    }
    .test-a {
        background-color: var(--my-green);
    }

**只作用于本CSS选择器**

.test-a {
        --my-green: #c3e6c8;
        background-color: var(--my-green);
    }

**只作用于本节点**

HTML

<div class="test-a" style='--my-green: #c3e6c8;' >
    	这是test-a
    </div>

CSS

.test-a {
        background-color: var(--my-green);
    }

## 默认值 ##

**常规用法**

下边这个例子中，--my-pink必须存在

:root {
    	--my-green: #c3e6c8;
    	--my-pink: #fed7d7;
    }
    
    div {
        background-color: var(--my-green);
    }

**默认值的设置**

如果没有指定某个属性，比如上边没有在:root里写--my-green，可以为它设置默认值。这样没有指定时，就采用默认值。

下边的例子中，所有div标签都会展示为黄色

:root {
    	--my-pink: #fed7d7;
    }
    
    div {
        background-color: var(--my-green, yellow);
    }

## 继承 ##

<div class="wrapper">
       <div class="content1"></div>
       <div class="content2"></div>
    </div>
    
    .wrapper {
       --color: red;
    }
    
    .content1 {
       --color: yellow;
    }

content1的--color为yellow

content2的--color没有定义，继承了wrapper的--color为red

## 属性的组合 ##

**字符串**

当自定义属性的值是字符串时，可以直接拼接。

例如：

:root{
      --screen-category: 'category';
    }
    body:after {
      content: '--screen-category: 'var(--screen-category);
    }

**数字**

当属性的值是数值时，必须使用calc()函数计算，而且必须要带单位。

正确的写法：

.foo {
      --gap: 20;
      margin-top: calc(var(--gap) * 2px);
    }

错误的写法：

.foo {
      --gap: 20;
      margin-top: var(--gap)px;
    }

## JS操作自定义属性 ##

**简介**

JS操作自定义属性和操作CSS的已有属性的方法是一样的，例如：

element.style.setProperty('--my-green', '#c3e6c8');

但是，不能这样设值：dom.style\["自定义属性名"\]=value;

**示例**

<!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>This is title</title>
        <style>
            :root {
                --my-green: #c3e6c8;
            }
            .test-a {
                background-color: var(--my-green);
            }
    
        </style>
    </head>
    
    <body>
    
    <div class="test-a">
        这是test-a
    </div>
    
    <script>
        let testA = document.getElementsByClassName('test-a')[0];
        testA.style.setProperty('--my-green', 'pink')
    </script>
    </body>
    </html>

结果

![f70504e1caf843e0afd8e5951806fd40.png][]

[CSS--_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122022175
[var]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/var
[_--_CSS_ - CSS_ _ MDN]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/--*
[CSS_ - CSS_ _ MDN]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties
[80b0c6e2f9514752b15951fe8ddba6bf.png]: https://img-blog.csdnimg.cn/80b0c6e2f9514752b15951fe8ddba6bf.png
[f70504e1caf843e0afd8e5951806fd40.png]: https://img-blog.csdnimg.cn/f70504e1caf843e0afd8e5951806fd40.png