1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <script type="text/javascript">
8 window.onload=function(){
9 var box=document.getElementById("box");
10 var button1=document.getElementById("button1");
11 button1.onclick=function(){
12 /*
13 修改box的样式
14 通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面
15 这样的执行的性能是比较差的，而且这种形式当我们要修改多个样式时也不太方便
16 修改box的class属性
17 我们可以通过修改元素的class属性来间接的修改样式
18 这样一来，我们只需要修改一次，即可同时修改多个样式
19 浏览器只需要重新渲染页面一次，性能比较好，
20 并且这种方式，可以使表现和行为进一步的分离
21 */
22 //box.style.width="2000px";
23 var b2=document.getElementById("b2");
24 //b2把b1的样式覆盖掉了
25 //box.className="b2";
26 //b2,b3样式同时拥有
27 //box.className+=" b3";
28 //addClass(box,b3);
29 //alert(hasClass(box,"b2"));
30 //removeClass(box,"b2");
31 //addClass(box,"b4");
32 alert(hasClass(box,"b4"));
33
34 if(hasClass(box,"b4"))
35 removeClass(box,"b4");
36 else
37 addClass(box,"b4");
38
39 };
40 };
41
42 /*定义一个函数，用来向一个元素中添加指定的class属性值
43 参数
44 obj 要添加class属性的元素
45 cn 要添加的class值
46 */
47 function addClass(obj,cn)
48 {
49 //检查obj中是否含有cn
50 if(!hasClass(obj,cn))
51 obj.className+=" "+cn;
52 }
53
54 /*
55 判断一个元素中是否含有指定的class属性值
56 如果有该class，则返回true，没有则返回false
57 */
58 function hasClass(obj,cn){
59 /*
60 判断obj中有没有cn class
61 创建一个正则表达式
62 */
63 //var reg=/\bb2\b/;这样写写死了，可以通过构造函数的方法
64 var reg=new RegExp("\\b"+cn+"\\b");
65 return reg.test(obj.className);
66 }
67
68 /*
69 删除一个元素中的指定的class属性
70 */
71 function removeClass(obj,cn){
72 //创建一个正则表达式
73 var reg=new RegExp("\\b"+cn+"\\b");
74 //删除class
75 obj.className=obj.className.replace(reg,"");
76 }
77
78 /*
79 toggleClass可以用来切换一个类
80 如果元素中具有该类，则删除
81 如果元素中没有该类，则添加
82 */
83 function toggleClass(obj,cn)
84 {
85 if(hasClass(obj,cn))
86 removeClass(obj,cn);
87 else
88 addClass(obj,cn);
89 }
90 </script>
91 <style type="text/css">
92 .b1{
93 width:100px;
94 height:100px;
95 background-color:red;
96 }
97 .b2{
98 width:200px;
99 height:200px;
100 background-color:yellow;
101 }
102 .b3{
103 height:300px;
104 background-color:yellow;
105 }
106 .b4{
107 background-color:green;
108 }
109 </style>
110 <body>
111 <button id="button1">点击按钮以后修改box的样式</button>
112 <br><br>
113 <div id="box" class="b1"></div>
114 </body>
115 </html>
