【趣味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文件当中，使用时，引入一下就可以了!

举个梨子

"点赞" "✍️评论" "收藏❤️"
大家的支持就是我坚持下去的动力!

---

如果以上内容有任何错误或者不准确的地方，欢迎在下面 留个言指出、或者你有更好的想法，
欢迎一起交流学习❤️❤️

更多 好玩 好用 好看的干货教程可以 点击下方关注❤️ 微信公众号❤️
说不定有意料之外的收获哦..嘿嘿嘿、嘻嘻嘻!