使用css的自定义属性,和getComputedStyle(),setProperty(),getPropertyValue()来实现
css的自定义样式(--是css的变量声明)
:root{
--theme-color:#f00
}
getComputedStyle(elem,伪):返回的是一个该elem的所有属性(自定义属性),如果第二个参数没有设置,则不会返回伪类的样式。
getPropertyValue():方法返回指定的 CSS 属性的值。
setProperty() 方法用于设置一个新的 CSS 属性,同时也可以修改 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: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>