原生javascript实现addClass和removeClass

addClass()和removeClass()是jQuery提供的功能。
用法:
$(selector).addClass(classname);$(selector).removeClass(classname);

在大多数情况下,使用jquery的选择器选择的元素是可以使用这两个方法来追加和删除class属性的,但是有一些特殊情况,不是通过$()选择器及jQuery其他方法(比如parent(), children()[0]等)拿到的元素,是没法使用这两个方法的。
比如下面这种情况:

var cArray = $("input[type='checkbox']");
for (var i=0; i < cArray.length; i++) {
    var element = cArray[i].parentElement;
    element.addClass('uncheck_1');
    //element.className += 'uncheck_1';
}

在这段代码里面,element是通过parentElement拿到的,所以在执行element.addClass('uncheck_1');的时候,会报错,提示addClass is not a function()错误。
这个时候,就需要使用原生的javascript方法来添加class了。

下面是通过原生的javascript实现了三个方法,可以解决上述问题。

function hasClass(element,cName){        //检查class是否存在
    return !!element.className.match(new RegExp('(\\s|^)'+cName+'(\\s|$)'));
}
function addClass(element,cName){        //添加一个class
    if(!hasClass(element,cName)){
        element.className +=' '+cName;
    }
}
function removeClass(element,cName){        //移除一个class
    if(hasClass(element,cName)){
        element.className = element.className.replace(new RegExp('(\\s|^)'+cName+'(\\s|$)'),' ');
    }
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值