classList介紹和原生JavaScript實現addClass、removeClass等

geekzhou 發布于2019-08-26 18:18 / 2566人閱讀

摘要：使用可以給元素很方便的添加和刪除等操作，現在原生的也可以實現這個方法了。刪除指定的類值。所以目前來看，還是無法在實際中放心的使用，只能用于某些特定的項目等。不過我們可以通過一些來實現，或者最下方給出的原生實現。

使用jQuery可以給元素很方便的添加class和刪除class等操作，現在原生的JavaScript也可以實現這個方法了。使用classList可以方便的添加class、刪除class、查詢class等。

語法：

let elementClass = element.classList;

elementClasses 是一個 DOMTokenList 表示 element 的類屬性。如果類屬性未設置或為空，那么 elementClasses.length 返回 0。element.classList 本身是只讀的，雖然你可以使用 add() 和 remove() 方法修改它。

方法：

add( String [, 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");

兼容性：

不兼容Android2.3和iOS4.2的，在移動端上想使用也是有點頭疼啊。IE系列的更別說IE9和IE8了。所以目前來看，還是無法在實際中放心的使用，只能用于某些特定的項目等。不過我們可以通過一些shim來實現，或者最下方給出的原生javascript實現。

跨瀏覽器javascript shim

https://github.com/eligrey/cl...

原生JavaScript

類似于jQuery庫的使用方式，使用className通過正則來添加或者刪除class。
addClass、removeClass、toggleClass、hasClass

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); 
 } 
}

參考鏈接：
https://blog.csdn.net/leadn/a...

云服務器 GPU云服務器原生js實現addclass 原生javascript javascript原生原生js實現

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110167.html

原生JavaScript實現hasClass、addClass、removeClass、toggle

摘要：兼容，因不支持和，分別用實現支持。支持明細代碼讓低版本支持讓低版本支持支持實現方式修復不規范傳參是否有必要判斷不支持實現方式完整代碼修復不規范傳參支持是否有必要判斷使用項目兼容IE6+，因IE6、IE7、IE8不支持Array.prototype.indexOf()和String.prototype.trim()，分別用Polyfill實現支持。詳細： index...

brianway 2019-08-20 10:21 評論0 收藏0
那些原生JavaScript

摘要：最近在用寫頁面，當然了在移動里引入或這些框架，肯定是極不理性的。原生挺簡單，為何需要的成功當時是因為這些瀏覽器不兼容，讓開發者崩潰，而且上瀏覽器性能好，跨平臺兼容也不影響性能。但根本就不是為手機設計的。最近在用mui寫頁面，當然了在移動App里引入jq或zepto這些框架，肯定是極不理性的。原生JS挺簡單，為何需要jq？jq的成功當時是因為ie6、7、8、9、10、chrome、ff...

fantix 2019-08-26 11:29 評論0 收藏0
放棄jQuery, 使用原生js

摘要：隨著的逐漸淘汰，的興起，以及側重點放在了移動端，可能變的不在那么重要，原生一樣很好用。下面介紹幾個原生替換的方法。隨著IE6、7、8的逐漸淘汰，HTML5的興起，以及側重點放在了移動端，jQuery可能變的不在那么重要，原生一樣很好用。下面介紹幾個原生替換jq的方法。獲取元素 //jQuery $(.xxx); //class獲取 $(#xxx); //id獲取 $(....

mumumu 2019-08-23 14:27 評論0 收藏0
忘掉jQuery，使用JavaScript原生API

摘要：以下是和實現相同操作的等價代碼選擇元素函數法調用創建元素添加事件監聽器設置獲取屬性添加移除切換類附加內容克隆元素移除元素獲取父元素上一個下一個元素或這些只是很少的一部分，不能等到哪一天變成只會用了，以下是jQuery和JavaScript實現相同操作的等價代碼選擇元素 //jQuery var ele = $(.ele); //javascript var ele = docum...

lidashuang 2019-08-19 17:12 評論0 收藏0
如何忘卻jQuery，開始使用JavaScript原生API

摘要：就在這里隨時等候你的召喚，但是也許你還沒有準備好如何使用他。但是我想討論的是如果僅為使用個選擇器或者類似的東西，是否真的有必要加載。假設咱不是為了簡化，每個人用是因為它支持，動畫處理和選擇器函數。 JavaScript就在這里隨時等候你的召喚，但是也許你還沒有準備好如何使用他。為什么不用jQuery呢？因為他很慢并且你的網站真的不需要這些多余的負擔。我不是來這里爭辯原生API和函數...

Rindia 2019-08-19 14:25 評論0 收藏0