原生js實(shí)現(xiàn)查找/添加/刪除/指定元素的class
更新時(shí)間:2013年04月12日 15:56:04 作者:
查找、添加、刪除、指定元素的class使用原生js實(shí)現(xiàn)不可思議吧,感興趣的朋友可以參考下哈,希望可以幫助到你
復(fù)制代碼 代碼如下:
window.onload = function(){
var gaga = document.getElementById( "gaga" );
addClass( gaga,"gaga1" )
addClass( gaga,"gaxx" );
removeClass( gaga,"gaga1" )
removeClass( gaga,"gaga" )
function hasClass( elements,cName ){
return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") ); // ( \\s|^ ) 判斷前面是否有空格 (\\s | $ )判斷后面是否有空格 兩個(gè)感嘆號(hào)為轉(zhuǎn)換為布爾值 以方便做判斷
};
function addClass( elements,cName ){
if( !hasClass( elements,cName ) ){
elements.className += " " + cName;
};
};
function removeClass( elements,cName ){
if( hasClass( elements,cName ) ){
elements.className = elements.className.replace( new RegExp( "(\\s|^)" + cName + "(\\s|$)" )," " ); // replace方法是替換
};
};
};
您可能感興趣的文章:
- 詳解用JS添加和刪除class類名
- 基于JavaScript實(shí)現(xiàn)類名的添加與移除
- 向JavaScript的數(shù)組中添加元素的方法小結(jié)
- javaScript給元素添加多個(gè)class的簡(jiǎn)單實(shí)現(xiàn)
- JavaScript DOM元素常見操作詳解【添加、刪除、修改等】
- js實(shí)現(xiàn)class樣式的修改、添加及刪除的方法
- JS添加或修改控件的樣式(Class)實(shí)現(xiàn)方法
- Javascript 檢測(cè)、添加、移除樣式(className)函數(shù)代碼
- 原生js實(shí)現(xiàn)class的添加和刪除簡(jiǎn)單代碼
- 原生js封裝添加class,刪除class的實(shí)例
- 原生js添加一個(gè)或多個(gè)類名的方法分析
相關(guān)文章
Ionic項(xiàng)目中Native Camera的使用方法
Ionic項(xiàng)目中如何使用Native Camera?這篇文章主要介紹了Ionic項(xiàng)目中Native Camera的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06Bootstrap菜單按鈕及導(dǎo)航實(shí)例解析
這篇文章主要介紹了Bootstrap菜單按鈕及導(dǎo)航的相關(guān)資料,本文介紹的非常詳細(xì),具有參考借鑒價(jià)值,感興趣的朋友一起學(xué)習(xí)吧2016-09-09微信小程序如何實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)功能詳解
這篇文章主要給大家介紹了關(guān)于微信小程序如何實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)功能的相關(guān)資料,包括頁(yè)面跳轉(zhuǎn)的方式、跳轉(zhuǎn)傳參的方法以及頁(yè)面返回的操作,通過簡(jiǎn)單的代碼示例,幫助讀者快速掌握微信小程序頁(yè)面跳轉(zhuǎn)的基本用法,下面需要的朋友可以參考下2023-03-03深入理解JavaScript和TypeScript中的class
class 聲明創(chuàng)建一個(gè)基于原型繼承的具有給定名稱的新類,下面這篇文章主要給大家介紹了關(guān)于JavaScript和TypeScript中class的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下。2018-04-04JavaScript實(shí)現(xiàn)時(shí)間倒計(jì)時(shí)跳轉(zhuǎn)(推薦)
這篇文章主要介紹了JavaScript實(shí)現(xiàn)時(shí)間倒計(jì)時(shí)跳轉(zhuǎn)(推薦)的相關(guān)資料,涉及到settimeout和setinterval方法的介紹,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06利用原生js和jQuery實(shí)現(xiàn)單選框的勾選和取消操作的方法
下面小編就為大家?guī)?lái)一篇利用原生js和jQuery實(shí)現(xiàn)單選框的勾選和取消操作的方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-09-09JS實(shí)現(xiàn)返回上一頁(yè)并刷新頁(yè)面的方法分析
這篇文章主要介紹了JS實(shí)現(xiàn)返回上一頁(yè)并刷新頁(yè)面的方法,結(jié)合實(shí)例形式分析了javascript針對(duì)移動(dòng)端、PC端瀏覽器的頁(yè)面緩存刷新相關(guān)操作技巧,需要的朋友可以參考下2019-07-07