【趣味JavaScript】利用className原生自定义封装实现快速操作html元素中的class属性,功能包含添加、删除、替换、验证是否存在, 极简方式轻量级!【附代码】

🚀 个人主页 极客小俊
✍🏻 作者简介：web开发者、设计师、技术分享博主
🐋 希望大家多多支持一下, 我们一起进步！😄
🏅 如果文章对你有帮助的话，欢迎评论 💬点赞👍🏻 收藏 📂加关注

我们可以使用className属性来实现对class类的设置,或者封装一些小函数

自定义一个hasClass函数

为了添加的class类不重复，所以我们在添加class类之前也应该判断一下当前元素是否已经存在了要添加的class类名称，所以这里我们可以封装一个hasClass()函数来实现这个查询是否存在的功能

代码如下

/**
 * @param obj        object
 * @param ClassName  string
 * @return {boolean}
 */
function hasClass(obj, ClassName) {
    if (obj.className === obj.id) {
        console.log('class名称和ID名称同名了，建议修改');
        return;
    }
    var reg = new RegExp("\\b" + obj.className + "\\b");
    return reg.test(obj.className);
}

自定义一个addClass函数

我们可以封装一个addClass()函数来为元素添加css中的class类

/**
 * @param obj        object
 * @param ClassName  string
 */
function addClass(obj, ClassName) {
    if (!hasClass(obj, ClassName)) {
        obj.className = ClassName;
    }
}

自定义一个removeClass函数

我们也可以封装一个removeClass()方法来删除指定的class类

代码如下

/**
 * @param obj
 * @param ClassName
 */
function removeClass(obj, ClassName) {
    if (hasClass(obj, ClassName)) {
        obj.attributes.removeNamedItem('class');
    }
}

自定义一个toggleClass函数

我们可以基于 addClass()方法 、hasClass()方法、removeClass()方法 这三个方法创建一个toggleClass()的方法 用于切换一个元素的class名 这样非常方便!

巴拉巴拉巴拉....😝😝😝

/**
 * @param obj        object
 * @param ClassName  string
 */
function toggleClass(obj, ClassName) {
    if (hasClass(obj, ClassName)) {
        removeClass(obj, ClassName);
    } else {
        addClass(obj, ClassName);
    }
}

把这些函数全部放到一个单独的js文件当中，使用时，引入一下就可以了!