8.2类的操作学习

LIN861246

已于 2022-08-21 22:34:24 修改

阅读量51

点赞数

文章标签：前端 html

于 2022-08-18 19:46:41 首次发布

本文链接：https://blog.csdn.net/LIN861/article/details/126412789

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">

           .b1{
               width: 100px;
               height: 100px;
               background-color: red;
           }

           .b2{
               height: 300px;
               background-color: yellow;
           }

       </style>

       <script type="text/javascript">

           window.onload = function(){
               //获取box
               var box = document.getElementById("box");
               //获取btn01
               var btn01 = document.getElementById("btn01");

               //为btn01绑定单击响应函数
               btn01.onclick = function(){
                   //修改box的样式
                   /*
                   * 通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面
                   *    这样的执行的性能是比较差的，而且这种形式当我们要修改多个样式时，也不太方便
                   */
                   /*box.style.width = "200px";
                   box.style.height = "200px";
                   box.style.backgroundColor = "yellow";*/

                   /*
                   * 我希望一行代码，可以同时修改多个样式
                   */

                   //修改box的class属性
                   /*
                   * 我们可以通过修改元素的class属性来间接的修改样式
                   * 这样一来，我们只需要修改一次，即可同时修改多个样式，
                   *    浏览器只需要重新渲染页面一次，性能比较好，
                   *    并且这种方式，可以使表现和行为进一步的分离
                   */
                   //box.className += " b2";
                   //addClass(box,"b2");

                   //alert(hasClass(box,"hello"));

                   //removeClass(box,"b2");

                   toggleClass(box,"b2");
               };

           };

           //定义一个函数，用来向一个元素中添加指定的class属性值
           /*
           * 参数:
           *    obj 要添加class属性的元素
           * cn 要添加的class值
           *
           */
           function addClass(obj , cn){

               //检查obj中是否含有cn
               if(!hasClass(obj , cn)){
                   obj.className += " "+cn;
               }

           }

           /*
           * 判断一个元素中是否含有指定的class属性值
           *    如果有该class，则返回true，没有则返回false
           *
           */
           function hasClass(obj , cn){

               //判断obj中有没有cn class
               //创建一个正则表达式
               //var reg = /\bb2\b/;
               var reg = new RegExp("\\b"+cn+"\\b");

               return reg.test(obj.className);

           }

           /*
           * 删除一个元素中的指定的class属性
           */
           function removeClass(obj , cn){
               //创建一个正则表达式
               var reg = new RegExp("\\b"+cn+"\\b");

               //删除class
               obj.className = obj.className.replace(reg , "");

           }

           /*
           * toggleClass可以用来切换一个类
           *    如果元素中具有该类，则删除
           *    如果元素中没有该类，则添加
           */
           function toggleClass(obj , cn){

               //判断obj中是否含有cn
               if(hasClass(obj , cn)){
                   //有，则删除
                   removeClass(obj , cn);
               }else{
                   //没有，则添加
                   addClass(obj , cn);
               }

           }

       </script>
   </head>
   <body>

       <button id="btn01">点击按钮以后修改box的样式</button>

       <br /><br />

       <div id="box" class="b1 b2"></div>
   </body>
</html>