one.css
1 body{ 2 background-color: black; 3 } 4 5 input{ 6 width: 200px; 7 height: 100px; 8 background-color: red; 9 }
TWO.css
1 body{ 2 background-color:#CCCCCC; 3 } 4 5 input{ 6 width: 100px; 7 height: 50px; 8 background-color: aquamarine; 9 }
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>
总结：
任何标签都可以加id，包括link
任何标签的任何属性，也都可以修改（例如html的href属性）
html怎么写，js就怎么写（除了className）
input的title属性：提示文字
html的实现效果：
点击皮肤1会显示一个皮肤，点击皮肤2又会显示另外一个个皮肤