简介

说明

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

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

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

官网

​​自定义属性 (--*)：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>

结果

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

作用域

作用于全局

: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>

结果

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