您的位置：首页 > Web前端 > JavaScript

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

2017-12-15 13:05 706 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 函数 class javascript

相关文章推荐

新的分享

章节导航