javaScript给元素添加多个class的简单实现
2019/6/27 22:15:18
本文主要是介绍javaScript给元素添加多个class的简单实现,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
javaScript给元素添加多个class的简单实现
<html> <head> <style type="text/css"> .div2{ font-size:16px; color:orange; } .div3{ font-size:20px; color:blue; } <style> <script type="text/javascript"> [1]直接把样式赋值给className var odiv=document.getElementById('div1'); odiv.className= div3 //这样我们会得到 class ="div3" 会直接把div2样式给覆盖掉; [2]使用累加赋值给className var odiv=document.getElementById('div1'); odiv.className+=" "+div3 //样式和样式之间需要空隙 ,所以加个空字符串隔开 //这样可以得到 class="div2 div3" 可以正常增加,但是我们在添加样式的时候我们得考虑下他本身之前有没有同名的样式,如果有我们添加的话就会变成累赘 比如class="div2 div3 div3"; [3]检测样式原先之前是否有相同的样式 var odiv=document.getElementById('div1'); function hasClass(element,csName){ element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)')); //使用正则检测是否有相同的样式 } [4]在[3]的基础上我们就可以进行判断性给元素添加样式了 var odiv=document.getElementById('div1'); function hasClass(element,csName){ return element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)')); //使用正则检测是否有相同的样式 } function addClass(element,csName){ if(!hasClass(element,csName)){ element.className+=' '+csName; } addClass(odiv,'div3'); //这样就可以灵活给元素添加样式了; 【元素删除指定样式】 //同样先进行判断,在进行删除 var odiv=document.getElementById('div1'); function hasClass(element,csName){ return element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)')); //使用正则检测是否有相同的样式 } function deleteClass(element,csName){ if(!hasClass(element,csName)){ element.className.replace(RegExp('(\\s|^)'+csName+'(\\s|$)'),' '); //利用正则捕获到要删除的样式的名称,然后把他替换成一个空白字符串,就相当于删除了 } deleteClass(odiv,div3); } </script> </head> <body> <div id="div1" class='div2'> 测试</div> </body> </html>
以上这篇javaScript给元素添加多个class的简单实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持找一找教程网。
这篇关于javaScript给元素添加多个class的简单实现的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist
- 2024-03-11icons for vue
- 2024-03-07breadcrumbs react js
- 2024-03-06react login page example
- 2024-03-06react router uselocation
- 2024-03-04postgres jsonb_set
- 2024-03-01react native uuid
- 2024-02-29vuejs sidebar