JS实现hasClass、addClass、removeClass和toggleClass

为了方便判断某个对象是否有某个类(class)、向某个对象添加类以及删除某个对象的类,可以用下面的js代码来实现。

函数说明:

hasClass

  • 参数:obj                               操作对象
  •            cls                               类名
  • 功能:判断操作对象obj是否具有类名为cls的类

addClass

  • 参数:obj                               操作对象
  •           cls                               类名
  • 功能:向操作对象obj添加类名为cls的类

removeClass

  • 参数:obj                               操作对象
  •            cls                               类名
  • 功能:向操作对象obj删除类名为cls的类

toggleClass

  • 参数:obj                               操作对象
  •            cls                               类名
  • 功能:如果操作对象obj具有类名为cls的类就删除cls类;如果操作对象obj不具有类名为cls的类就添加cls类。
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);
    }
}

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

8 + 14 =

16 − = 7