原生js實現(xiàn)查找/添加/刪除/指定元素的class
更新時間:2013年04月12日 15:56:04 作者:
查找、添加、刪除、指定元素的class使用原生js實現(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 | $ )判斷后面是否有空格 兩個感嘆號為轉(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實現(xiàn)類名的添加與移除
- 向JavaScript的數(shù)組中添加元素的方法小結(jié)
- javaScript給元素添加多個class的簡單實現(xiàn)
- JavaScript DOM元素常見操作詳解【添加、刪除、修改等】
- js實現(xiàn)class樣式的修改、添加及刪除的方法
- JS添加或修改控件的樣式(Class)實現(xiàn)方法
- Javascript 檢測、添加、移除樣式(className)函數(shù)代碼
- 原生js實現(xiàn)class的添加和刪除簡單代碼
- 原生js封裝添加class,刪除class的實例
- 原生js添加一個或多個類名的方法分析
相關(guān)文章
微信小程序如何實現(xiàn)頁面跳轉(zhuǎn)功能詳解
這篇文章主要給大家介紹了關(guān)于微信小程序如何實現(xiàn)頁面跳轉(zhuǎn)功能的相關(guān)資料,包括頁面跳轉(zhuǎn)的方式、跳轉(zhuǎn)傳參的方法以及頁面返回的操作,通過簡單的代碼示例,幫助讀者快速掌握微信小程序頁面跳轉(zhuǎn)的基本用法,下面需要的朋友可以參考下2023-03-03深入理解JavaScript和TypeScript中的class
class 聲明創(chuàng)建一個基于原型繼承的具有給定名稱的新類,下面這篇文章主要給大家介紹了關(guān)于JavaScript和TypeScript中class的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下。2018-04-04JavaScript實現(xiàn)時間倒計時跳轉(zhuǎn)(推薦)
這篇文章主要介紹了JavaScript實現(xiàn)時間倒計時跳轉(zhuǎn)(推薦)的相關(guān)資料,涉及到settimeout和setinterval方法的介紹,非常不錯具有參考借鑒價值,需要的朋友可以參考下2016-06-06利用原生js和jQuery實現(xiàn)單選框的勾選和取消操作的方法
下面小編就為大家?guī)硪黄迷鷍s和jQuery實現(xiàn)單選框的勾選和取消操作的方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-09-09