原生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-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);
    }
}

转载于:https://www.cnblogs.com/hiuman/p/7347401.html

你可能感兴趣的:(原生JavaScript实现jQuery的hasClass,removeClass,addClass,toggleClass)