suchen

Heim >Web-Frontend >js-Tutorial >Natives JavaScript zur Implementierung der Operationsmethode der Dom-Elementklasse (grafisches Tutorial)

Natives JavaScript zur Implementierung der Operationsmethode der Dom-Elementklasse (grafisches Tutorial)

亚连
亚连Original
2018-05-19 09:37:141675Durchsuche

这篇文章主要介绍了原生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匿名自执行函数概念与使用说明

Das obige ist der detaillierte Inhalt vonNatives JavaScript zur Implementierung der Operationsmethode der Dom-Elementklasse (grafisches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Zusammenfassung des Tutorials zum ECMAscript-VariablenbereichNächster Artikel：Zusammenfassung des Tutorials zum ECMAscript-Variablenbereich

In Verbindung stehende Artikel

Mehr sehen