原生JavaScript实现jQuery的hasClass,removeClass,addClass,toggleClass

介绍:

1、hasClass:判断DOM元素是否存在类。

2、addClass:为的DOM元素添加类。

3、removeClass:删除DOM元素的类。

4、toggleClass:如果DOM元素存在(不存在)类,就删除(添加)类。

原生 JavaScript 实现的代码:

// 实现方法2:传入一个数组

function hasClass(obj, className) {
// obj是数组或伪数组
for(var i = 0,len = obj.length;i<len;i++){
if((' '+obj[i].className+' ').indexOf(' '+className+' ')>-1){
return true;
}
} return false;
} // ----------------
// ----------------
// ----------------
// 实现方法1:传入单个对象 function hasClass(obj, cls) {
return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
} function addClass(obj, cls) {
if (!this.hasClass(obj, cls)) {
obj.className += " " + cls;
}
} function removeClass(obj, cls) {
if (hasClass(obj, cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
obj.className = obj.className.replace(reg, ' ');
}
} function toggleClass(obj,cls){
if(hasClass(obj,cls)){
removeClass(obj, cls);
} else {
addClass(obj, cls);
}
}
上一篇:mysql utf8mb4与emoji表情


下一篇:Bootstrap学习目录