Javascript网页换肤

最新推荐文章于 2024-07-11 20:55:36 发布

weixin_30682415

最新推荐文章于 2024-07-11 20:55:36 发布

阅读量107

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/rm1314/p/3493555.html

版权

效果图：

代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>JS网页换肤</title>
 6 <style type="text/css">
 7     html,body,div,ul,li,h1{padding: 0;margin: 0;}
 8     li{list-style: none;}
 9     a{text-decoration: none;color: #ccc;font-size: 12px;}
10     #colorBtn{width: 960px;margin: 10px auto;overflow: hidden;}
11     #colorBtn li{float: left;margin-right: 10px; width: 14px;height: 14px;}
12     .green{background: green;}
13     .red{background: red;}
14     #backChange{width: 960px;margin: 20px auto 0 auto;border-radius: 4px;}
15     #backChange h1{font-size: 14px;height: 24px;line-height: 24px;padding: 0 5px;}
16     .content{width: 948px;padding: 5px;height: 100px;font-size: 14px;}
17 </style>
18 <link id="styleChange" rel="stylesheet" href="styleGreen.css" />
19 <!-- 样式  end -->
20 <script type="text/javascript">
21     var schange=document.getElementById('styleChange'); //全局变量 不写在函数之内 可以影响toGreen()和toRed()
22     function toGreen(){
23         schange.href='styleGreen.css';  //改变链接的样式表
24     }
25     function toRed(){
26         schange.href='styleRed.css';
27     }
28 </script>
29 <!-- JS网页换肤 end -->
30 </head>
31 <body>
32 <ul id="colorBtn" >
33     <li class="green" onclick="toGreen()"></li>
34     <li class="red" onclick="toRed()"></li>
35 </ul>
36 <!-- 颜色按钮 end -->
37 <div id="backChange" >
38     <h1>标题</h1>
39     <div class="content">
40         内容
41     </div>
42 </div>
43 </body>
44 </html>

styleGreen.css

1 @charset "utf-8";
2 /* CSS Document */
3 
4 #backChange{border:1px solid green;}
5 #backChange h1{color:green;border-bottom: 1px solid green;}
6 .content{color: green;}

styleRed.css

1 @charset "utf-8";
2 /* CSS Document */
3 
4 #backChange{border:1px solid red;}
5 #backChange h1{color:red;border-bottom: 1px solid red;}
6 .content{color: red;}

知识点：

1、原理：通过onclick使页面加载不同的css样式

2、*页面内任何标签都可以添加ID

3、*页面内任何标签的任何属性都可以通过JS更改。且html怎么写，js就怎么改（className例外，因为class为JS保留字）。

4、实例中的schange为全局变量，详细参考：http://www.cnblogs.com/xianbing/archive/2012/02/27/2369369.html

转载于:https://www.cnblogs.com/rm1314/p/3493555.html

weixin_30682415

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript网页换肤

效果图：代码： 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml">...
复制链接

扫一扫