簡單的JS+CSS實作網頁自定義換膚

1，實作效果
2，實作原理
3，完整代碼

1，實作效果

2，實作原理

主要原理是利用css變量設定顔色，用js動态修改變量，使顔色變化，相容性如下；

實作換膚之前先要了解一下僞類選擇器

:root

，還有css的

var()

函數和

setProperty()

函數

:root

是一個僞類，表示文檔根元素，非IE及IE8及以上浏覽器都支援，在

:root

中聲明相當于全局屬性，隻要目前頁面引用了

:root

所在的檔案，都可以使用css

var()

函數來引用；

文法

// 自定義屬性的名稱，必需以 -- 開頭
:root{
   --main_bg:#1E90FF;
   --main_color:rgba(0,100,200,1);
}

var()

函數，可以代替元素中，任何屬性中的值的任何部分；

var()

函數不能作為屬性名、選擇器或者其他除了屬性值之外的值，這樣做通常會産生無效的文法或者一個沒有關聯到變量的值；

文法

// var(--name,value)
// --name，自定義屬性的名稱，必需以 -- 開頭; value，可選，備用值，在屬性不存在的時候使用;
.box{
    background-color: var(--main_bg);
    color: var(--box_color, red);
    border: var(--box_border,10px solid #000000);
}

setProperty()

方法用于設定一個新的 css 屬性，同時也可以修改 css 聲明塊中已存在的屬性，相容性如下；

文法

let box = document.querySelector("#box").value;
document.documentElement.style.setProperty("--main_bg",box);

3，完整代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>換膚</title>
    <style>
        *{ margin: 0;padding: 0; }
        #head{ height: 300px;border-bottom:1px solid gray; }
        #btn{ width: 100px;height: 40px;border-radius: 4px;text-align: center;line-height: 40px;color: #FFFFFF;cursor: pointer;margin-left: calc(50% - 50px); }
        #ipt{ width: 100%;height: 40px;line-height: 40px;font-size: 20px; text-align: center; border-right: none;border-left: none;}
        :root{
            --main_bg:#1E90FF;
        }
        .color{
            background-color: var(--main_bg);
        }
    </style>
</head>
<body>
    <div id="head" class="color"></div>
    <div id="body">
        <input type="text" id="ipt" placeholder="請輸入顔色值">
        <div id="btn" class="color" onclick="changeBg()">變色</div>
    </div>

    <script>
        function changeBg(){
            let color = document.querySelector("#ipt").value;
            document.documentElement.style.setProperty("--main_bg",color);
        }
    </script>
</body>
</html>

如果看了覺得有幫助的，我是@鵬多多，歡迎點贊關注評論；

END

往期文章

微信小程式實作上傳多張本地圖檔到伺服器和圖檔預覽
微信小程式API互動的自定義封裝

個人首頁

CSDN
GitHub
簡書
部落格園
掘金