1. 程式人生 > >css 變數 實現頁面換膚

css 變數 實現頁面換膚

開始之前先說說css3的自定義屬性,之前我們在寫css的時候全部都是使用自身屬性,比如margin,padding等。但是你曾是否見過這樣的css

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

其中的–primary-color、–light、–dark就是自定義的屬性。

  1. 自定義屬性的命名規則
--variables-name:variables-value
--屬性名:屬性值
例如定義一個主題顏色:
--theme-color:red;
  1. 作用域
//:root作用於全域性
:root{
    --theme-color:red;
}
//#app作用於id為app的節點內
#app{
    --theme-color:red;
}
  1. 使用方法 var(自定義屬性名)
  2. 通過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");

明白了這幾個概念我們開始實現我們的換膚功能:

<!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:black;
            background-color: var(--btn-black)
        }
        #btn-blue{
            --btn-blue:blue;
            background-color: var(--btn-blue)
        }
    </style>
</head>
<body>
    <header id="header">
        <h1>CSS3自定義屬性實現換膚功能Demo</h1>  
    </header>

    <div>
        <button id="btn-red">red</button>
        <button id="btn-black">black</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>

--------------------- 本文來自 花開花又謝 的CSDN 部落格 ,全文地址請點選:https://blog.csdn.net/u010730897/article/details/81116958?utm_source=copy

主要使用到  :root  偽類 和 -- css 變數, 瀏覽器相容情況要考慮

想要更詳細瞭解的, 可以點這裡張鑫旭大神的博文: