亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

classList介紹和原生JavaScript實現(xiàn)addClass、removeClass等

geekzhou / 2672人閱讀

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

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

語法：

let elementClass = element.classList;

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

方法：

add( String [, String] )

添加指定的類值。如果這些類已經(jīng)存在于元素的屬性中，那么它們將被忽略。

remove( String [,String] )

刪除指定的類值。

item ( Number )

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

toggle ( String [, force] )

當(dāng)只有一個參數(shù)時：切換 class value; 即如果類存在，則刪除它并返回false，如果不存在，則添加它并返回true。
當(dāng)存在第二個參數(shù)時：如果第二個參數(shù)的計算結(jié)果為true，則添加指定的類值，如果計算結(jié)果為false，則刪除它

contains( String )

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

示例：

// div是具有class =“foo bar”的
元素的對象引用
div.classList.remove("foo");
div.classList.add("anotherclass");

// 如果visible被設(shè)置則刪除它，否則添加它
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來實現(xiàn)，或者最下方給出的原生javascript實現(xiàn)。

跨瀏覽器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...

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/110167.html

相關(guān)文章

  • 原生JavaScript實現(xiàn)hasClass、addClass、removeClass、toggle

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

    brianway 評論0 收藏0

  • 那些原生JavaScript

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

    fantix 評論0 收藏0

  • 放棄jQuery, 使用原生js

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

    mumumu 評論0 收藏0

  • 忘掉jQuery，使用JavaScript原生API

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

    lidashuang 評論0 收藏0

  • 如何忘卻jQuery，開始使用JavaScript原生API

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

    Rindia 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<