classList屬性

lewif 發布于2019-08-29 12:25 / 2984人閱讀

摘要：為每個元素定義了屬性，用于在元素中添加，移除及切換類。該屬性是對象一個只讀的類數組對象，你可以通過定義的方法對其進行修改。

HTML5為每個元素定義了classLlist屬性，用于在元素中添加，移除及切換 CSS 類。該屬性是 DOMTokenList 對象（一個只讀的類數組對象），你可以通過DOMTokenList定義的方法對其進行修改。

屬性：

length：返回類列表中類的數量（只讀）

用法：el.classList.length

方法：

.a { color:red }
.b { color:green }
.c { color: yellow }



var el = document.getElementById(div);

add( class1, class2, ...)

在元素中添加一個或多個類名（如果指定的類名已存在，則不會添加）
用法：`el.classList.add("a", "b", "c");`

remove( class1, class2, ...)

刪除元素中一個或多個類名
用法：el.classList.remove("a","b");

toggle(class, true|false)

在元素中切換類名
參數1：要移出或者添加的類名
參數2：可選參數，不論類名是否存在，為true時強制添加類名，false時強制刪除類名
用法： 添加：el.classList.toggle("d", true);，刪除：el.classList.toggle("d", false);

contains( class )

判斷指定的類名是否存在
用法：el.classList.contains("e")  ，//返回true

item(index)

根據索引返回類名，索引從 0 開始，如果沒有則返回null
用法：el.classList.item(0)  //返回e

GPU云服務器云服務器 classList 刪除屬性設置屬性屬性編號

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

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

JS基礎篇--HTML DOM classList 屬性

摘要：使用，程序員還可以用它來判斷某個節點是否被賦予了某個類。現在是增加現在是刪除是否存在類檢查是否含有某個類結果是或者。屬性返回類列表中類的數量。查看元素有多少個類名獲取獲取元素的所有類名返回類名在元素中的索引值。頁面DOM里的每個節點上都有一個classList對象，程序員可以使用里面的方法新增、刪除、修改節點上的CSS類。使用classList，程序員還可以用它來判斷某個節點是否被賦...

snowell 2019-08-01 16:17 評論0 收藏0
classList介紹和原生JavaScript實現addClass、removeClass等

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

geekzhou 2019-08-26 18:18 評論0 收藏0
HTML5與類有關的擴充

摘要：與類相關的擴充在開發領域得到廣泛采用后導致了一個很大的變化，即屬性用得越來越多，一方面可以通過它為元素添加樣式，另一方面還可以用它表示元素的語義。在對象上調用始終會返回與類名匹配的所有元素，在元素上調用該方法就只會返回后代元素中匹配的元素。對于傳統HTML而言，HTML5是一個叛逆。所有之前的版本對JavaScript接口的描述都不過三言兩語，主要篇幅都用于定義標記，與JavaScr...

TwIStOy 2019-08-22 11:10 評論0 收藏0