1.替换css文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link id="css" rel="stylesheet" href="./red.css">
</head>
<body>
<div>aaa</div>
<button onclick="changeTheme('red')">red</button>
<button onclick="changeTheme('black')">black</button>
<script>
function changeTheme(theme) {
var css=document.getElementById("css");
css.setAttribute("href", './' + theme + '.css');
}
</script>
</body>
</html>
// red.css
div{
color: red;
}
// black.css
div{
color: black;
}
2. 使用CSS3自定义属性实现换肤功能
<!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>
3. link rel=alternate网站换肤功能最佳实现
参考: www.zhangxinxu.com/wordpress/2…
兼容性: ie9+
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="default.css" rel="stylesheet" type="text/css" title="默认">
<link href="red.css" rel="alternate stylesheet" type="text/css" title="红色">
<link href="black.css" rel="alternate stylesheet" type="text/css" title="黑色">
</head>
<body>
<div>aaa</div>
<input id="default" type="radio" name="skin" value="default.css" checked>
<input id="red" type="radio" name="skin" value="red.css">
<input id="black" type="radio" name="skin" value="black.css">
<script>
var eleLinks = document.querySelectorAll('link[title]');
var eleRadios = document.querySelectorAll('[type="radio"]');
[].slice.call(eleRadios).forEach(function (radio) {
radio.addEventListener('click', function () {
var value = this.value;
[].slice.call(eleLinks).forEach(function (link) {
link.disabled = true;
if (link.getAttribute('href') == value) {
// 该样式CSS文件生效
link.disabled = false;
}
});
});
});
</script>
</body>
</html>
4. less.modifyVars修改样式
antd就是采用这种方案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet/less" type="text/css" href="less.less" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
</head>
<body>
<div class='test-block'>aaa</div>
<button onclick='changeColor("#f00")'>red</button>
<button onclick='changeColor("#0f0")'>green</button>
<script>
function changeColor(color) {
window.less
.modifyVars({ // 调用 `less.modifyVars` 方法来改变变量值
'@primary-color': color,
'@bg-color': '#2f54eb',
});
}
</script>
</body>
</html>
5. Element-UI换肤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link id="css" rel="stylesheet" href="./default.css">
<style></style>
</head>
<body>
<div>aaa</div>
<button onclick="changeTheme('red')">red</button>
<button onclick="changeTheme('black')">black</button>
<script>
function changeTheme(theme) {
let cssText
fetch('./default.css')
.then(res => res.text())
.then(source => {
cssText = source.replace(new RegExp('#0f0', 'g'), theme)
const style = document.createElement('style')
style.innerText = cssText
document.head.appendChild(style)
})
}
</script>
</body>
</html>