原生js來實現對dom元素class的操作方法

jQuery操作class的方式非常強大

寫了一個利用原生js來實現對dom元素class的操作方法

1.addClass:為指定的dom元素添加樣式

2.removeClass:刪除指定dom元素的樣式

3.toggleClass:如果存在(不存在)，就刪除(添加)一個樣式

4.hasClass:判斷樣式是否存在

下面為一toggleClass的測試例子

[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>??

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/247700.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/247700.shtml
英文地址，請注明出處：http://en.pswp.cn/news/247700.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！