类的操作（className）-CSDN博客

本文链接：https://blog.csdn.net/LIUCHUANQI12345/article/details/109913038
类的操作

通过style来修改属性，每次修改，浏览器都要重新渲染一次，多个属性修改，需要多次语句，我们可以通过类操作样式，统一修改。增删改查四个方法的封装。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类的操作</title>
    <style>
        .b1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .b2 {
            width: 200px;
            /*height: 200px;*/
            background-color: yellow;
        }
    </style>
    <script>
        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";
                /**
                 * 我们希望一行代码，可以同时修改多行样式
                 * 我们可以通过修改元素的class属性来简介修改样式
                 * 这样我们只需要修改一次，即可修改多个样式
                 * 浏览器只用重新渲染一次，性能比较高
                 * 并且这种方式，可以将表现和行为进一步分离
                 * html结构  css表现   javascript行为
                 */
                //box.className = "b2";
                /**
                 * 如果不行直接替换b1，需要保留b1中的部分属性
                 * b2用来顶替同名属性，就可以通过多个类名实现
                 * + = 但是需要注意，类名和类名之间有空格，后加类名前需要加一个空格
                 */
                box.className += " b2";//记得加一个空格
                alert(hasClass(box,"b2"));
                removeClass(box,"b1");
                toggleClass(box,"b2");
            };
            //这种操作很普遍，我们可以定义一个函数，用来向一个元素中添加指定class属性
            /**
             * 参数：
             *      1.obj:要添加class属性的对象
             *      2.cn: 要添加的class值
             */
            function addClass(obj,cn) {
                //检查obj中是否含有cn
                if (!hasClass(obj,cn)){
                    obj.className += " "+cn;
                }
            }

            /**
             * 每点依次就会添加一次，肯定不好，
             * 我们需要一个判断函数，来判断一个元素中是否有指定的class值
             * 参数和上边一样,如果有返回true ,没有返回false
             */
            function hasClass(obj,cn) {
                //判断obj中有没有cn class
                //创建一个正则表达式,\b单词边界，
               // var reg = /\bb2\b/ ;
                /**
                 * 变量名无法直接写入正则表达式，会被当成字母
                 * 故采用构造函数，将其转化为正则表达式
                 * 斜杠需要转义\\表示\
                 */
                var reg = new RegExp("\\b"+cn+"\\b");
                    return reg.test(obj.className);

            }

            /**
             * 增加有了，查找有了，现在肯定要有移除class函数
             * 删除一个元素中指定的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"></div>
</body>
</html>