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

来源：互联网发布：mysql use index 编辑：程序博客网时间：2024/05/16 15:45

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。因此为了更好的兼容性，我们可以自己手动实现这几个方法。

阅读全文

0 0