这个效果就跟换肤效果差不多
需要准备两套或两套以上的css
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link id="l1" rel="stylesheet" type="text/css" href="css1.css" /> 7 <script type="text/javascript"> 8 function skin1(){ 9 var a=document.getElementById('l1'); 10 a.href='css1.css'; 11 } 12 function skin2(){ 13 var a=document.getElementById('l1'); 14 a.href='css2.css'; 15 } 16 </script> 17 </head> 18 <body> 19 <input type="button" value="orange" onclick="skin1()" /> 20 <input type="button" value="yellow" onclick="skin2()" /> 21 </body> 22 </html>
第一套css
1 body{ 2 background-color: orange; 3 } 4 input{ 5 width: 50px; 6 height: 30px; 7 background-color: orange; 8 }
第二套css
1 body{ 2 background-color: yellow; 3 } 4 input{ 5 width: 50px; 6 height: 30px; 7 background-color: yellow; 8 }