你未必熟悉的 Web API - Element.classList

Neilyo 發布于2019-08-23 18:19 / 1592人閱讀

摘要：刪除任意數量的類名，若類名不存在，也不會拋出異常。起始根據索引返回相應的類名。起始輸出用新的類名替換指定的類名。起始兼容性及以下不支持

介紹

可以用來替代以 element.className 訪問和操作 CSS 類名的方式

返回元素 class 屬性的 DOMTokenList，本身只讀，但是可以通過自身的 add / remove 等方法修改元素的 class 屬性

若元素的 class 屬性未設置或者為空，則 classList.length 為 0

用法 add( String [, String [, ...]] )

添加任意數量的類名，若類名已存在則會被忽略。

const div = document.createElement("div");
const cls = ["foo", "bar"];

div.className = "foo"; // "foo"
div.classList.add(...cls); // "foo bar"
div.classList.add("bar baz"); // "foo bar baz"

remove( String [, String [, ...]] )

刪除任意數量的類名，若類名不存在，也不會拋出異常。

// 起始："foo bar baz"
div.classList.remove("foo"); // "bar baz"

item( Number )

根據索引返回相應的類名。

// 起始："bar baz"
console.log(div.classList.item(1)); // 輸出："baz"

toggle( String [, force] )

當只有一個參數時：

若類名已存在，則刪除指定的類名并返回 false

若類名不存在，則添加指定的類名并返回 true

當有兩個參數時：

若第二個參數的值為 true，則添加指定的類名

若第二個參數的值為 false，則刪除指定的類名

// 起始："bar baz"
div.classList.toggle("foo"); // "foo bar baz"
div.classList.toggle("foo"); // "bar baz"
div.classList.toggle("foo", 2 < 1 ); // "bar baz"

contains( String )

檢查指定的類名是否存在。

// 起始："bar baz"
console.log(div.classList.contains("foo")); // 輸出：false

replace( oldClass, newClass )

用新的類名替換指定的類名。

// 起始："bar baz"
div.classList.replace("bar", "foo");  // "foo baz"

兼容性

IE 9 及以下不支持

GPU云服務器云服務器熟悉linux的操作熟悉linux的使用熟悉linux的應用你理解的html

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

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

你未必熟悉的 Web API - Element.classList

摘要：刪除任意數量的類名，若類名不存在，也不會拋出異常。起始根據索引返回相應的類名。起始輸出用新的類名替換指定的類名。起始兼容性及以下不支持介紹可以用來替代以 element.className 訪問和操作 CSS 類名的方式返回元素 class 屬性的 DOMTokenList，本身只讀，但是可以通過自身的 add / remove 等方法修改元素的 class 屬性若元素的 c...

cartoon 2019-08-02 15:23 評論0 收藏0
如何形成一個完整的HTML對象

摘要：定義是一個由可以接收事件的對象實現的接口，并且可以為它們創建偵聽器。重點分割線只有通過上面的繼承關系，我們得到的元素才是一個完整的對象，我們才能為它設置獲取屬性綁定事件添加樣式類等操作。寫在前面，本文將同步發布于Blog、掘金、segmentfault、知乎等處，如果本文對你有幫助，記得為我得到我的個人技術博客項目給個star哦。為何寫這篇文章？你可能做Web開發已經有一段時間，...

freewolf 2019-08-23 10:28 評論0 收藏0
前端面試知識點集錦

摘要：個人總結的比較全面的前端面試知識點。主要是一些個人認為面試時容易考到以及平時需要注意的一些知識點。如果需要進行深入了解可以根據知識點查詢相關的技術文章。個人總結的比較全面的前端面試知識點。主要是一些個人認為面試時容易考到以及平時需要注意的一些知識點。本人只是對這些知識進行了一個大概的總結，還有一部分技術還沒開始涉及，后期會持續添加。如果需要進行深入了解可以根據知識點查詢相關的技術文...

iKcamp 2019-08-30 12:58 評論0 收藏0