微客导航 » 文章资讯 » 原生JavaScript来实现对dom元素class的操作方法(推荐)

原生JavaScript来实现对dom元素class的操作方法(推荐)

2023-09-26 09:17:26 151

jQuery操作class的方式非常强大

写了一个利用原生js来实现对dom元素class的操作方法

1.addClass:为指定的dom元素添加样式
2.removeClass:删除指定dom元素的样式
3.toggleClass:如果存在(不存在)，就删除(添加)一个样式
4.hasClass:判断样式是否存在

下面为一toggleClass的测试例子

[html]viewplaincopy

div.testClass{
background-color:gray;
}


functionhasClass(obj,cls){
returnobj.className.match(newRegExp('(\\s|^)'+cls+'(\\s|$)'));
}
functionaddClass(obj,cls){
if(!this.hasClass(obj,cls))obj.className+=""+cls;
}
functionremoveClass(obj,cls){
if(hasClass(obj,cls)){
varreg=newRegExp('(\\s|^)'+cls+'(\\s|$)');
obj.className=obj.className.replace(reg,'');
}
}
functiontoggleClass(obj,cls){
if(hasClass(obj,cls)){
removeClass(obj,cls);
}else{
addClass(obj,cls);
}
}
functiontoggleClassTest(){
varobj=document.getElementById('test');
toggleClass(obj,"testClass");
}



sssssssssssss

以上就是小编为大家整理的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家继续支持毛票票~~

返回顶部
3162201930
czq8825@qq.com

原生JavaScript来实现对dom元素class的操作方法(推荐)

热门推荐

随机推荐