自定义属性 · CSS系列！

首发地址：https://mp.weixin.qq.com/s/WL...
更多技术分享及时获取，欢迎关注~

“ 为什么要了解css自定义属性？css自定义属性有什么用途呢？在声明式语言中引入变量，在一些特定场景极大的增强了其灵活性。”

现在带着问题进入正文~

一、使用方法

约定以--开头的为自定义属性，如下声明的--color：

.container {
    --color: blue;
}

声明的自定义属性怎么使用呢?使用var()获取自定义属性的值：

p {
    background-color: var(--color,red);     
    //第二个参数为缺省值：当--color无效时，使用red
}

注意点:

1. 作用域 
    上例中自定义属性--color的作用域是class包含container的元素以及其后代子孙元素。换言之，如果上例中p元素沿着父级作用域链未找到--color的声明，就会使用red作为默认值。 
    如果想要--color作为全局作用域的变量使用，可以设置如下：

:root {
   --color: red;
}

    如果某个模块中的元素想要有自己统一--color，只需在模块样式中重新声明即会在其模块内覆盖父作用域的值。

2. 自定义属性（变量）区分大小写

3. 行内声明的方式 
    如下方式设置背景色是可行的：

<style>
    .container {
        background: var(--bgColor, #fff);
    }
</style>

<div class="container" style="--bgColor: pink">

4.结合calc函数，结合多个自定义属性

• calc：用于动态计算长度值。
• 支持 "+", "-", "*", "/" 运算；
• 运算符前后都需要保留一个空格(笔者测试仅+、-不留空格会出现解析问题，不过规范起见，最好都保留)，例如：width: calc(100% - 10px)；

• 多个自定义属性相互引用

  :root {
    --font-base: 20px;
   }
   p {
    --font-self: calc(var(--font-base) * 2);
    font-size: var(--font-self);
   }

二、自定义属性值的获取和设置

1. 获取--color自定义属性值

//getComputedStyle  | getPropertyValue
getComputedStyle(document.querySelector('.container'))
  .getPropertyValue('--color').trim();

2. 设置--color自定义属性值

document.body.style.setProperty('--color', val)

自定义属性值一旦被改变，所有与之相关联的 CSS 属性都会更新，即轻松实现批量更新元素属性值。

三、应用举例：主题色

//自行测试看效果

 :root {
      --color: red;
     --background: pink;
 }
 p, h1 {
       color: var(--color);
       background: var(--background) 
 }
</style>

<script>
 function changeColor(val) {
    document.body.style.setProperty('--color', val);
 }
</script>

<h1>我的第一个标题</h1>
<p>这是文本内容</p>
<button onClick="changeColor('blue')">蓝色主题</button>
<button onClick="changeColor('yellow')">黄色主题</button>

更多技术分享，欢迎关注~