js-网页换肤

one.css

1 body{
2     background-color: black;
3 }
4 
5 input{
6     width: 200px;
7     height: 100px;
8     background-color: red;
9 }

View Code

TWO.css

1 body{
2     background-color:#CCCCCC;
3 }
4 
5 input{
6     width: 100px;
7     height: 50px;
8     background-color: aquamarine;
9 }

View Code

one.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <link id="l1" href="one.css" type="text/css" rel="stylesheet">
 7 
 8     <script>
 9         function skin1() {
10           var oL=document.getElementById('l1');
11           oL.href='one.css';
12         }
13         function skin2() {
14             var oL=document.getElementById('l1');
15             oL.href='TWO.css';
16         }
17 
18     </script>
19 </head>
20 <body>
21 <input type="button" value="皮肤1" onclick="skin1()" />
22 <input type="button" value="皮肤2" onclick="skin2()" />
23 
24 </body>
25 </html>

View Code

总结：

任何标签都可以加id，包括link

任何标签的任何属性，也都可以修改（例如html的href属性）

html怎么写，js就怎么写（除了className）

input的title属性：提示文字

html的实现效果：

点击皮肤1会显示一个皮肤，点击皮肤2又会显示另外一个个皮肤