css自定义属性和使用

最新推荐文章于 2024-05-28 16:26:24 发布

牛先森家的牛奶

最新推荐文章于 2024-05-28 16:26:24 发布

阅读量528

点赞数 1

分类专栏： HTML 文章标签： css

本文链接：https://blog.csdn.net/weixin_42681295/article/details/108789215

版权

HTML 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1、自定义属性的命名规则

  --variables-name:variables-value(变量名是大小写敏感的)
  --属性名:属性值
  
  例如定义一个主题颜色：
  --theme-color:red;

// 例如:
root{
    --primary-color:#989898;
    --light:#fff;
    --dark:#000;
}

2、作用域

//:root作用于全局
:root{
    --theme-color:red;
}
//#app作用于id为app的节点内
#app{
    --theme-color:red;
}

3、使用方法 var(自定义属性名)

// 使用
some-css-value: var(--variable-name [, declaration-value]);

//现在全局定义
:root{
   --theme-color:red;
}

//使用的时候
#app{
    background-color:var(--theme-color);
}

//假如我们没有指定--theme-color这个属性，则可以在使用的时候加上替代值
#app{
    background-color:var(--theme-color,black);//没有指定--theme-color则会由black代替
}

4、通过js获取和设置自定义的属性

//js中获取--theme-color的值
var styles = getComputedStyle(document.documentElement);
var value = styles.getPropertyValue("--theme-color");
console.log(value);//red

//js中更改--theme-color的值
document.documentElement.style.setProperty("--theme-color","black");

5、使用css自定义属性

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>CSS3自定义属性实现换肤功能</title>
  <style type="text/css">
    :root {
      --theme-color: #989898;
    }

    #header {
      width: 100%;
      height: 50px;
      line-height: 50px;
      background-color: var(--theme-color);
      margin-bottom: 30px;
    }

    #header h1 {
      color: #fff;
    }

    button {
      width: 100px;
      height: 30px;
      color: #fff;
      border: none;
    }

    #btn-red {
      --btn-red: red;
      background-color: var(--btn-red)
    }

    #btn-black {
      --btn-black: green;
      background-color: var(--btn-black)
    }

    #btn-blue {
      --btn-blue: blue;
      background-color: var(--btn-blue)
    }
  </style>
</head>

<body>
  <header id="header">
    <h1>CSS3自定义属性实现换肤功能</h1>
  </header>

  <div>
    <button id="btn-red">red</button>
    <button id="btn-black">green</button>
    <button id="btn-blue">blue</button>
  </div>

  <script type="text/javascript">
    var btns = document.getElementsByTagName("button");
    for (var i = 0; i < btns.length; i++) {
      btns[i].addEventListener("click", function (e) {
        var ele = e.target || e.srcElement;
        var styles = getComputedStyle(ele);
        var value = styles.getPropertyValue("--" + ele.id);
        document.documentElement.style.setProperty("--theme-color", value);
      })
    }

  </script>
</body>

</html>

在这里插入图片描述
6、可以和css预处理器一起使用

具体使用可看下面链接

引用：待花谢花开 — css自定义属性
参考：深入学习css自定义属性

牛先森家的牛奶

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css自定义属性和使用

1、自定义属性的命名规则 --variables-name:variables-value(变量名是大小写敏感的) --属性名:属性值例如定义一个主题颜色： --theme-color:red;// 例如:root{ --primary-color:#989898; --light:#fff; --dark:#000;}2、作用域//:root作用于全局:root{ --theme-color:red;}//#app作用于id为ap
复制链接

扫一扫