css 變數 實現頁面換膚
阿新 • • 發佈:2018-12-12
開始之前先說說css3的自定義屬性,之前我們在寫css的時候全部都是使用自身屬性,比如margin,padding等。但是你曾是否見過這樣的css
:root{
--primary-color:#989898;
--light:#fff;
--dark:#000;
}
其中的–primary-color、–light、–dark就是自定義的屬性。
- 自定義屬性的命名規則
--variables-name:variables-value
--屬性名:屬性值
例如定義一個主題顏色:
--theme-color:red;
- 作用域
//:root作用於全域性 :root{ --theme-color:red; } //#app作用於id為app的節點內 #app{ --theme-color:red; }
- 使用方法 var(自定義屬性名)
- 通過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 變數, 瀏覽器相容情況要考慮
想要更詳細瞭解的, 可以點這裡張鑫旭大神的博文: