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

时间 2019-11-17

标签特效网页栏目 JavaScript 繁體版

原文原文链接

什么是网页换肤

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

完整代码

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>
复制代码

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

什么是网页换肤

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

完整代码

专栏地图