首页 > Web开发 > 详细

JS切换

时间:2019-09-06 16:39:22      阅读:79      评论:0      收藏:0      [点我收藏+]

这个效果就跟换肤效果差不多

需要准备两套或两套以上的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 }

 

JS切换

原文:https://www.cnblogs.com/jiushui/p/11474944.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!