类的操作

迈不过友情╰ 2021-11-17 17:32 158阅读 0赞

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>

转载于:https://www.cnblogs.com/zuiaimiusi/p/11271708.html