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

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

发布:2020-03-01 16:26:55 72


给大家整理一篇javascript相关的编程文章,网友汲碧莹根据主题投稿了本篇教程内容,涉及到JS、dom、class、原生JavaScript来实现对dom元素class的操作方法(推荐)相关内容,已被403网友关注,涉猎到的知识点内容可以在下方电子书获得。

原生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> 

 

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

 


参考资料

相关文章

  • travis-ci持续部署node.js应用的方法

    发布:2020-01-13

    最近在学习使用 travis-ci 对项目进行持续集成测试,所以下面这篇文章主要给大家介绍了关于使用travis-ci如何持续部署node.js应用的相关资料,文中介绍的非常详细,需要的朋友可以参考借鉴,下


  • python json数据怎么写入文件

    发布:2019-07-03

    在本篇文章中小编给大家整理了关于python json数据怎么写入文件的相关实例内容以及代码,需要的朋友们学习参考下。


  • Vue.js修饰符知识点详解

    发布:2019-08-02

    本篇文章主要介绍了Vue.js学习笔记之修饰符,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • 详解【python】str与json类型转换

    发布:2022-10-17

    给大家整理一篇关于python的教程,这篇文章主要介绍了【python】str与json类型转换,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧


  • 一文带你了解Python中的type,isinstance和issubclass

    发布:2023-04-29

    这篇文章主要为大家详细介绍了Python中的type、isinstance和issubclass的使用,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下


  • python常用函数random()函数详解

    发布:2023-03-29

    这篇文章主要介绍了python常用函数random()函数,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下


  • jQuery遍历json的实例代码

    发布:2019-12-17

    这篇文章主要介绍了jQuery遍历json的方法的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下


  • java实现Yaml转Json示例详解

    发布:2023-04-07

    这篇文章主要为大家介绍了java实现Yaml转Json示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪


网友讨论