[作特效, 學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>
複製代碼