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=/b2/;这样写写死了，可以通过构造函数的方法 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>