原生JavaScript來實(shí)現(xiàn)對dom元素class的操作方法(推薦)
jQuery操作class的方式非常強(qiáng)大
寫了一個利用原生js來實(shí)現(xiàn)對dom元素class的操作方法
1.addClass:為指定的dom元素添加樣式
2.removeClass:刪除指定dom元素的樣式
3.toggleClass:如果存在(不存在),就刪除(添加)一個樣式
4.hasClass:判斷樣式是否存在
下面為一toggleClass的測試?yán)?/p>
[html] view plain copy <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>
以上就是小編為大家整理的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,也希望大家繼續(xù)支持腳本之家~~
- 一個JavaScript操作元素定位元素的實(shí)例
- JavaScript獲取元素尺寸和大小操作總結(jié)
- JavaScript操作DOM元素的childNodes和children區(qū)別
- javascript數(shù)組操作(創(chuàng)建、元素刪除、數(shù)組的拷貝)
- js中數(shù)組插入、刪除元素操作的方法
- JS實(shí)現(xiàn)為動態(tài)創(chuàng)建的元素添加事件操作示例
- js操作table元素實(shí)現(xiàn)表格行列新增、刪除技巧總結(jié)
- JavaScript DOM元素常見操作詳解【添加、刪除、修改等】
- js有關(guān)元素內(nèi)容操作小結(jié)
- JS簡單實(shí)現(xiàn)獲取元素的封裝操作示例
- 整理JavaScript對DOM中各種類型的元素的常用操作
- javascript操作元素的常見方法小結(jié)
相關(guān)文章
javascript實(shí)現(xiàn)的網(wǎng)頁局布刷新效果
AJAX,近幾年火熱起來的一個詞.什么是ajax本文就不介紹了,其實(shí),AJAX也就是 javascript腳本的應(yīng)用.全拼是:AsynchronousJavaScript+XML .現(xiàn)在我們就來看一個用javascript實(shí)現(xiàn)的局部刷新2008-12-12實(shí)現(xiàn)網(wǎng)頁頁面跳轉(zhuǎn)的幾種方法(meta標(biāo)簽、js實(shí)現(xiàn)、php實(shí)現(xiàn))
今天總結(jié)了幾種頁面跳轉(zhuǎn)的方法,分別是用meta標(biāo)簽實(shí)現(xiàn)、用javascript實(shí)現(xiàn)、用php實(shí)現(xiàn),下面就來一一分享一下吧。2014-05-05Javascript實(shí)例項(xiàng)目放大鏡特效的實(shí)現(xiàn)流程
商城網(wǎng)站包括APP端中把鼠標(biāo)光標(biāo)移動到預(yù)覽圖上就會看到這部分商品圖片放大了,這就是JavaScript實(shí)現(xiàn)的放大鏡特效,今天我們也來實(shí)現(xiàn)一波2021-11-11