[做特效, 学JS] -- 03 网页换肤

猫哥的技术博客
1,191 阅读1分钟

什么是网页换肤

最终样式是酱婶儿的...

完整代码

  • skin1.css
body {
    background: black;
}
input {
    width: 200px;
    height: 100px;
    background: yellow;
}
  • skin2.css
body {
    background: #ccc;
}
input {
    width: 100px;
    height: 50px;
    background: red;
}
  • index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="skin1.css">
</head>
<body>
	<input class="changeSkin" type="button" value="皮肤一"> 
	<input class="changeSkin" type="button" value="皮肤二"> 
</body>
<script>
	var skin1 = document.getElementsByClassName('changeSkin')[0];
	var skin2 = document.getElementsByClassName('changeSkin')[1];
	var link = document.getElementsByTagName('link')[0];
	skin1.onclick = function(){
		link.href = "skin1.css";
	}
	skin2.onclick = function(){
		link.href = "skin2.css";
	}
</script>
</html>

专栏地图

avatar
文章
阅读
粉丝