生活随笔
收集整理的這篇文章主要介紹了
原生js来实现对dom元素class的操作方法
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
jQuery操作class的方式非常強(qiáng)大
寫(xiě)了一個(gè)利用原生js來(lái)實(shí)現(xiàn)對(duì)dom元素class的操作方法
1.addClass:為指定的dom元素添加樣式
2.removeClass:刪除指定dom元素的樣式
3.toggleClass:如果存在(不存在)，就刪除(添加)一個(gè)樣式
4.hasClass:判斷樣式是否存在
下面為一toggleClass的測(cè)試?yán)?/span>
[html]?view plaincopy
<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>??
總結(jié)
以上是生活随笔為你收集整理的原生js来实现对dom元素class的操作方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
