如何对DOM元素的class属性进行读取、更新、移除操作？

本文共计331个文字，预计阅读时间需要2分钟。

选中元素const app=document.querySelector('#app');

html元素

<div id="app" class="red"></div>

选中元素

const app = document.querySelector('#app')

读取类名

app.className // red app.classList // DOMTokenList ['red'] app.classList.value // red app.getAttribute('class') // red

修改类名

// 直接修改 className app.className = 'green' // <div id="app" class="green"></div> // 通过classList添加 app.classList.add('green') // <div id="app" class="red green"></div> // 通过setAttribute设置属性值 app.setAttribute('class', 'blue') // <div id="app" class="blue"></div>

删除类名

app.className = ""; // <div id="app" class=""></div> app.classList.remove('red') // <div id="app" class=""></div> app.removeAttribute('class') // <div id="app"></div>

切换类名

// 存在则移除 app.classList.toggle('red') // <div id="app" class=""></div> // 不存在则添加 app.classList.toggle('green') // <div id="app" class="red green"></div>

DOMTokenList对象

DOMTokenList - 属性 - length 值的个数 - value 字符串形式 - 方法 - item(index) - contains(token) - add(token1[, token2[, ...tokenN]]) - remove(token1[, token2[, ...tokenN]]) - replace(oldToken, newToken) - supports(token) - toggle(token [, force]) - entries() - forEach(callback [, thisArg]) - keys() - values()

文档：developer.mozilla.org/zh-CN/docs/Web/API/DOMTokenList

综上，一共有三种方式对dom元素class属性进行读取、更新、移除操作

参考

1. javaScript 添加和移除class类名的几种方法