原生js实现addClass,removeClass,hasClass方法

最新推荐文章于 2023-07-23 08:00:30 发布

LeapMotion1

最新推荐文章于 2023-07-23 08:00:30 发布

阅读量1.8k

点赞数

分类专栏： Javascript 文章标签：函数 class javascript

本文链接：https://blog.csdn.net/LeapMotion1/article/details/78811735

版权

Javascript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1.hasClass()

//判断某个类是否存在
function hasClass(element, value) {
    var cls = value || '';
    //\s 匹配任何空白字符，包括空格、制表符、换页符等等
    if (cls.replace(/\s/g, '').length == 0) {
        return false;   //当没有参数返回时，返回false
    }
    return new RegExp(' ' + cls + ' ').test(' ' + element.className + ' ');
}

2.removeClass()

function removeClass(element, value) {
    if (hasClass(element, value)) {
        //\t 匹配一个制表符；\r 匹配一个回车符；\n 匹配一个换行符
        var newClass = ' ' + element.className.replace(/\t\r\n/g, '') + ' ';
        while (newClass.indexOf(' '+ value + ' ') > -1) {
            newClass = newClass.replace(' ' + value + ' ', ' ');
        }
        element.className = newClass.replace(/^\s+|\s+$/g,'');
    }
}

3.addClass()

//该方法可独立存在
function addClass(element, value) {
    //类名为空时，直接添加该类
    if (!element.className || element.className == "") {
        element.className = value;
        return;
    }
    //类名不为空时，先判断该类名是否已经存在，若不存在，则添加该类名
    var cls = ' ' + value + ' ';
    if (cls.indexOf(' ' + element.className + ' ') <= -1) {
        var newClass = element.className;
        newClass += ' ';
        newClass += value;
        element.className = newClass;
    }
}

//该方法在hasClass()函数已存在的基础上，添加类
function addClass(element, value) {
    if (!hasClass(element, value)) {
        element.className = element.className == '' ? value : element.className + ' ' + value;
    }
}

4.html5样式–classList

其实html5已经扩展了class操作的相关API，其中classList属性就以及实现了class的增删和判断。
classList属性的方法有：

add(value) 添加类名，如果有则不添加
contains(value) 判断是否存在类名，返回Boolean值
remove(value) 从列表中删除类名
toggle(value) 切换类名：如果列表中存在则删除，否则添加

<body class="test1 test2 test3 test4"></body>

利用classList属性检测代码

    var bodyer = document.getElementsByTagName('body')[0];
    console.log(bodyer.classList);

这里写图片描述

可见其直接暴露的API有：
length：表示元素类名的个数，只读
item() ：支持一个参数，为类名的索引，返回对应的类名

document.body.classList.item(3); //输出test4

但是add() contains()等函数，一次只能添加或修改一个类名，不过我们可以通过修改原型函数实现可以添加、删除或修改多个类名的方法。
关于该方法的具体介绍可点击链接查看。
目前支持classList属性的浏览器有FireFox 3.6+和Chrome。因此为了更好的兼容性，我们可以自己手动实现这几个方法。

LeapMotion1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js实现addClass,removeClass,hasClass方法

1.hasClass()//判断某个类是否存在function hasClass(element, value) { var cls = value || ''; //\s 匹配任何空白字符，包括空格、制表符、换页符等等 if (cls.replace(/\s/g, '').length == 0) { return false; //当没有参数返回时，
复制链接

扫一扫