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

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

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

我们可以使用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文件当中,使用时,引入一下就可以了!

举个梨子

在这里插入图片描述

"点赞" "✍️评论" "收藏❤️"

大家的支持就是我坚持下去的动力!

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

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

你可能感兴趣的:(【趣味Javascript】,前端开发,DOM操作,javascript,函数封装,className,经验分享,html)