原生JS增、刪、改、查 類名

Element.classList 方法

 

Element.classList 是一個只讀屬性，返回一個元素的類屬性的實時 DOMTokenList 集合。

相比將 element.className 作爲以空格分隔的字符串來使用，classList 是一種更方便的訪問元素的類列表的方法。

語法

const elementClasses = elementNodeReference.classList;

返回值

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

示例

const div = document.createElement('div');
div.className = 'foo';

// 初始狀態：<div class="foo"></div>
console.log(div.outerHTML);

// 使用 classList API 移除、添加類值
div.classList.remove("foo");
div.classList.add("anotherclass");

// <div class="anotherclass"></div>
console.log(div.outerHTML);

// 如果 visible 類值已存在，則移除它，否則添加它
div.classList.toggle("visible");

// add/remove visible, depending on test conditional, i less than 10
div.classList.toggle("visible", i < 10 );

console.log(div.classList.contains("foo"));

// 添加或移除多個類值
div.classList.add("foo", "bar", "baz");
div.classList.remove("foo", "bar", "baz");

// 使用展開語法添加或移除多個類值
const cls = ["foo", "bar"];
div.classList.add(...cls); 
div.classList.remove(...cls);

// 將類值 "foo" 替換成 "bar"
div.classList.replace("foo", "bar");