本文主要是介绍JS——网页换肤，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
此处的网页换肤的效果通过改变link的href属性，来改变页面的CSS样式，达到还付的效果。
效果如下：
· 标签内设置事件，且鼠标点击事件onclick = ""
代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link id="link1" rel="stylesheet" href="皮肤1.css">
</head>
<body><form action=""><input type="button" id="btn1" value="皮肤1" οnclick="document.getElementById('link1').href = '皮肤1.css';" ><input type="button" id="btn2" value="皮肤2" οnclick="document.getElementById('link1').href = '皮肤2.css';"><div class="content"><h1>haha</h1><p>hhhhhhhhhhhhhhhhhhhhhhhhhhhh</p></div></form>
</body>
</html>皮肤1.css
form {width: 800px;height: 500px;background-color: skyblue;
}input {margin-top: 80px;margin-left: 10px;}
.content {width: 780px;height: 350px;margin: 0 auto;background-color: #fff;
}皮肤2.css
form {width: 800px;height: 500px;background-color: skyblue;background: url(time.jpg);
}input {margin-top: 80px;margin-left: 10px;background-color: #2000ff;border: 2px solid blue;color: #fff;}
.content {width: 780px;height: 350px;margin: 0 auto;background-color: #fff;
}这篇关于JS——网页换肤的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
