recherche

Maison >interface Web >js tutoriel >JavaScript natif pour implémenter la méthode de fonctionnement de la classe d'éléments dom (tutoriel graphique)

JavaScript natif pour implémenter la méthode de fonctionnement de la classe d'éléments dom (tutoriel graphique)

亚连
亚连original
2018-05-19 09:37:141674parcourir

这篇文章主要介绍了原生JavaScript来实现对dom元素class的操作方法,提供了代码toggleClass的测试例子，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。

jQuery操作class的方式非常强大

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

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

下面为一toggleClass的测试例子

[html] view plain copy
<style type="text/css"> 
 p.testClass{ 
 background-color:gray; 
 } 
</style>
 <script type="text/javascript"> 
function hasClass(obj, cls) { 
 return obj.className.match(new RegExp(&#39;(\\s|^)&#39; + cls + &#39;(\\s|$)&#39;)); 
} 
function addClass(obj, cls) { 
 if (!this.hasClass(obj, cls)) obj.className += " " + cls; 
} 
function removeClass(obj, cls) { 
 if (hasClass(obj, cls)) { 
 var reg = new RegExp(&#39;(\\s|^)&#39; + cls + &#39;(\\s|$)&#39;); 
 obj.className = obj.className.replace(reg, &#39; &#39;); 
 } 
} 
function toggleClass(obj,cls){ 
 if(hasClass(obj,cls)){ 
 removeClass(obj, cls); 
 }else{ 
 addClass(obj, cls); 
 } 
} 
function toggleClassTest(){ 
 var obj = document. getElementById(&#39;test&#39;); 
 toggleClass(obj,"testClass"); 
} 
</script>
<body> 
 <p id = "test" style = "width:250px;height:100px;"> 
 sssssssssssss 
 </p> 
 <input type = "button" value = "toggleClassTest" onclick = "toggleClassTest();" /> 
</body>

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

NodeJS父进程与子进程资源共享步骤详解

p5.js鼠标交互如何实现并使用

JS匿名自执行函数概念与使用说明

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Tutoriel récapitulatif de la portée des variables ECMAscriptArticle suivant：Tutoriel récapitulatif de la portée des variables ECMAscript

Articles Liés

Voir plus