原生js新增類名

2021-08-14 18:55:09 字數 2551 閱讀 7924

動態新增class類名在前端開發過程中是很常見得做法，比如說在實現輪播圖的時候給當前的錨點新增乙個active類,有又或者在實現動畫的時候新增乙個終態css類。

當然，有很多js庫中封裝了新增類名的方法，典型的比如jquery中的addclass()方法。但是，在實際開發中，如果頁面比較簡單，邏輯功能不是特別複雜的時候。還是推薦用原生的js來實現這些功能，這樣能夠有效的提公升使用者的體驗效果。試想一下，如果你開發的乙個頁面總共也就幾百行**，使用者每次使用的時候還要去載入幾k甚至幾十k的js庫檔案。對於使用者而言，這個體驗效果可想而知。

首先，我們了解下js有哪些可以設定class的方法。主要有三種,el.setattribute('class','class1'),el.setatrribute('classname','class2')以及el.classname='class3'.

.class1


.class2


.class3
el.setattribute('class','class1')相容性  ie7及ie7以下版本不支援
el.setattribute('classname', 'class2')相容性:恰好和el.setattribute('class','class1')相反，不相容ie7+ /firefox/safari/chrome/opera 相容ie7及ie7以下版本
el.classname='class3'相容性：所有瀏覽器都支援 ，有沒有很興奮，哈哈哈。終於找到你，還好我沒放棄。

廢話不多說，先來段**
你以為這樣就沒了麼，js其實還有別的方法可以新增class類名哦，下面我們就來看看。

element.classlist

element.classlist

是乙個唯讀屬性，返回乙個元素的類屬性的實時domtokenlist集合。

add( string [, string] )

新增指定的類值。如果這些類已經存在於元素的屬性中，那麼它們將被忽略。

// div是具有class =「foo bar」的元素的物件引用


div.classlist.


add(


"anotherclass"


);
說到這裡，就來多提一下element.classlist吧

它總共有五種方法add( string [, string] )remove( string [,string] )  item( number ) toggle( string [, force] )contains( string )

remove( string [,string] )

刪除指定的類值。

item ( number )

按集合中的索引返回類值。

toggle ( string [, force] )

當只有乙個引數時：切換 class value; 即如果類存在，則刪除它並返回false，如果不存在，則新增它並返回true。

當存在第二個引數時：如果第二個引數的計算結果為true，則新增指定的類值，如果計算結果為false，則刪除它

contains( string )

檢查元素的類屬性中是否存在指定的類值。

// div是具有class =「foo bar」的元素的物件引用


div.classlist.


remove


("foo");


div.classlist.


add(


"anotherclass");


// 如果visible被設定則刪除它，否則新增它


div.classlist.


toggle


("visible");


// 新增/刪除 visible，取決於測試條件，i小於10


div.classlist.


toggle


("visible"


, i <10)


;alert


(div.classlist.


contains


("foo"))


;//新增或刪除多個類


div.classlist.


add(


"foo"


,"bar");


div.classlist.


remove


("foo"


,"bar"


);
備註：今天就到這裡吧，分享是一種快樂，學習是一種習慣。

原生JS新增類名 刪除類名

為 元素新增 class document.getelementbyid mydiv classlist.add mystyle 為 元素新增多個類 document.getelementbyid mydiv classlist.add mystyle anotherclass thirdclass...

原生js給div新增類

一 寫個函式然後傳入物件元素跟樣式名字，判定是否為空，如果不為空就賦值樣式名字 function addclass elm,newclass 二 寫個函式然後傳入物件元素跟需要新增到樣式名字，判定是否為空，如果為空就賦值，否則就加個空格再賦值 function addclass elm,newcla...

原生JS增 刪 改 查 類名

element.classlist是乙個唯讀屬性，返回乙個元素的類屬性的實時domtokenlist集合。相比將element.classname作為以空格分隔的字串來使用，classlist是一種更方便的訪問元素的類列表的方法。const elementclasses elementnoderef...