JavaScript元素类的操作总结。_js 类元素操作-优快云博客

本文链接：https://blog.youkuaiyun.com/wzg0817/article/details/105784895

封装成方法如下：

/*  定义一个函数 addClass() 用来向元素中添加指定的class属性值
            参数：
                obj ：要添加class属性值的元素
                cn ： 套添加的class属性      为字符串
         */
        function addClass(obj, cn) {
            if (!hasClass(obj, cn)) {
                obj.className += " " + cn;
            }

        };

        /*
        * 判断一个class中是否含有指定的class属性值
        * 参数：
                obj ：要检查的元素
                cn ： 检查的class属性         为字符串
         */
        function hasClass(obj, cn) {
            // 检查obj中是否含有cn

            var reg = RegExp("\\b" + cn + "\\b");
            return reg.test(obj.className);

        };

        /**
         * 移除指定元素中指定的class属性值
         * 参数：
                obj ：要检查的元素
                cn ： 检查的class属性           为字符串
         */
        function moveClass(obj, cn) {
            var reg = RegExp("\\b" + cn + "\\b");
            obj.className = obj.className.replace(reg, "");
        };

        /**
        * 切换class属性值
        * 参数：
                obj ：要检查的元素
                cn  ：检查的class属性          为字符串
        */
        function toggleClass(obj, cn) {
            if (hasClass(obj, cn)) {
                moveClass(obj, cn);
            } else {
                addClass(obj, cn);
            }

        };