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

原创已于 2023-06-28 07:05:36 修改 · 337 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端开发 #DOM操作 #javascript #函数封装 #className #经验分享 #html

于 2023-06-28 07:04:27 首次发布

javascript核心技术专栏收录该内容

13 篇文章

订阅专栏

文章介绍了如何使用JavaScript自定义函数来操作DOM元素的class。包括检查元素是否已包含特定class的hasClass函数，添加class的addClass函数，移除class的removeClass函数，以及切换class的toggleClass函数。这些函数有助于更高效地管理元素样式。

🚀 个人主页 极客小俊
✍🏻 作者简介：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);
    }
}