当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 原生JavaScript来实现对dom元素class的操作方法(推荐)

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

2017年12月12日  | 移动技术网IT编程  | 我要评论

jquery操作class的方式非常强大

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

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

下面为一toggleclass的测试例子

[html] view plain copy
<style type="text/css"> 
 div.testclass{ 
 background-color:gray; 
 } 
</style> 

 <script type="text/javascript"> 
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); 
 } 
} 
function toggleclasstest(){ 
 var obj = document. getelementbyid('test'); 
 toggleclass(obj,"testclass"); 
} 
</script> 


<body> 
 <div id = "test" style = "width:250px;height:100px;"> 
 sssssssssssss 
 </div> 
 <input type = "button" value = "toggleclasstest" onclick = "toggleclasstest();" /> 
</body>

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网