类的操作

  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>