原生html切换皮肤

原理：

1.每个皮肤对应一个css文件，好维护

2.通过js动态更改<link />标签的href属性

直接上代码：

index.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="referrer" content="always" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link id="test" rel="Stylesheet" type="text/css" href="default.css" />
</head>
<body>
    <div class="divColor"></div><br />
    <input type="button" value="按钮颜色" class="btnColor" /><br /><br />
    
    <input type="button" value="绿色" onclick="setColor('green')" />
    <input type="button" value="红色" onclick="setColor('red')" />
    <input type="button" value="默认" onclick="setColor('default')" />
    <script>
        function setColor(color){
            document.getElementById("test").setAttribute("href", color + ".css")
        }
    </script>
</body>
</html>

default.css

.divColor{
    background-color:#ccc;
    width:200px;
    height:200px;
}

.btnColor{
    background-color:#ccc;
    border-color:#ccc;
    color:#333;
}

red.css

.divColor{
    background-color:#f00;
    width:200px;
    height:200px;
}

.btnColor{
    background-color:#f00;
    border-color:#f00;
    color:#fff;
}

green.css

.divColor{
    background-color:#0f0;
    width:200px;
    height:200px;
}

.btnColor{
    background-color:#0f0;
    border-color:#0f0;
    color:#fff;
}