当前位置:首页 > 编程教程 > javascript技术文章 > 原生JavaScript来实现对dom元素class的操作方法(推荐)

利用原生JS来实现对dom元素class的操作方法

  • 发布时间:
  • 作者:码农之家
  • 点击:72

这篇文章主要知识点是关于JS、dom、class、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

精通JavaScript
精通JavaScript高清第2版
  • 类型:JavaScript大小:33.5 MB格式:PDF作者:陈贤安
立即下载

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

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> 

 

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

 

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

javascript 相关电子书
学习笔记
网友NO.716733

vue如何判断dom的class

vue点击给dom添加class然后获取含有class的dom div class="chose-ck" v-for="(item,index2) in colors" :key="index2" ref="chosebox" p{{item.name}}/p dt v-for="(item2,index) in item.childsCurGoods" :key="item2.id" :class="index==iac[index2]?'check':''" :id="item2.id" :data-chosename="item.name" :data-choseidname="item2.name" :data-chose="item.id" :data-id="item2.id" @click="chek(index2,index)" {{item2.name}} /dt /divjs chek(index2, index) { this.iac[index2] = index this.iac = this.iac.concat([]); this.checkchose() }, checkchose:function(){ var chose=this var chosedom=chose.$refs.chosebox console.log(chosedom) for (var i=0;ichosedom.length;i++) { var children=chosedom[i].children for (var j=0;jchildren.length;j++) { if(children[j].className=="check") { console.log(children[j]) } } } } 点击过后获取到的dom打印 if(children[j].className=="check") 加了判断为什么打印出来的dom是点击之前的dom 总结 以上所述是小编给大家介绍的vue如何判断dom的cla……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com