開始之前先說說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(自定義屬性名)
//現在全局定義
:root{
--theme-color:red;
}
//使用的時候
#app{
background-color:var(--theme-color);
}
//假如我們沒有指定--theme-color這個屬性，則可以在使用的時候加上替代值
#app{
background-color:var(--theme-color,black);//沒有指定--theme-color則會由black代替
}
- 通過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: %;
height: px;
line-height: px;
background-color: var(--theme-color);
margin-bottom: px;
}
#header h1{
color: #fff;
}
button{
width: px;
height: px;
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=;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>
![【CSS3】設定超連結樣式超連結樣式[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)