标签：Web el classList JavaScript className 添加 移除 类名
通过className来添加或删除类名
添加类名
获取元素el.className = "类名1 类名2 ...";多个类名用空格隔开。
移除类名
获取元素名el.className = " ";直接等于一个空字符串即可删除类名。
通过classList来添加或删除类名
添加一个类名
获取元素名el.classList.add("类名");。
添加多个类名用逗号隔开
获取元素名el.classList.add("类名1", "类名2", "类名3", ...);每个类名需要用引号引起来。
移除一个类名
获取元素名el.classList.remove("类名");。
移除多个类名
获取元素名el.classList.remove("类名1", "类名2", "类名3", ...);每个类名需要用引号引起来。
className与classList的区别
简介
className和classList是操作HTML元素类名的两种不同方法。
className
概述
className是一个字符串属性，表示元素的所有类名。
添加类名
方法：el.className = "类名1 类名2 ...";。
效果：直接设置元素的class属性为指定的类名字符串。这会替换掉元素上原有的所有类名。
示例：如果一个元素原来有类名"oldClass"，使用el.className = "newClass1 newClass2";后，类名将变为"newClass1 newClass2"，而不再包含"oldClass"。
移除类名
方法：el.className = "";。
效果：直接将className置为空字符串，从而移除所有类名。
优点
简单直接，适合需要重置或完全替换类名的场景。
兼容性好，几乎所有浏览器都支持。
缺点
无法单独添加或移除某个类名，只能通过重新设置整个className来完成操作。
操作不够灵活，容易误删原有类名。
classList
概述
classList是一个DOMTokenList对象，提供了对元素类名的操作方法。
添加类名
方法：el.classList.add("类名");。
效果：在元素的现有类名基础上添加一个新的类名，不会影响已有的类名。
移除类名
方法：el.classList.remove("类名");。
效果：从元素的现有类名中移除指定的类名，不会影响其他类名。
批量添加或移除类
方法：el.classList.add("类名1", "类名2", "类名3", ...); 和el.classList.remove("类名1", "类名2", "类名3", ...);。
效果：可以一次性添加或移除多个类名，操作简洁方便。
优点
操作更为灵活，可以单独添加或移除类名，不会影响其他类名。
提供了更多的操作方法，比如toggle()、contains()等，可以实现更多复杂的类名操作。
语义清晰，代码可读性好。
缺点
兼容性较className稍差，但现代浏览器基本都已支持。
总结
className适合简单且需要完全替换类名的场景，但在操作多个类名时不够灵活。
classList则更适合复杂场景，尤其是需要频繁增删类名时，它的灵活性和可读性更强。
效果图：
案例：
html：
<input type="text" value="手机" />
style
input {
outline: none;
height: 35px;
line-height: 35px;
border: 1px solid #ccc;
color: #999;
text-indent: 1rem;
display: inline-block;
transition: all .3s;
}
.active {
border: 1px solid skyblue;
color: #333;
}
.active2 {
box-shadow: 0 0 3px 2px pink;
}
JavaScript：
window.onload = function () {
document.querySelector('input').onfocus = function () {
this.value = "";
// 方法一：
// this.style.color = "#333";
// this.style.border = "1px solid skyblue";
// 方法二：
this.classList.add("active", "active2");
// 方法三：
// this.className = "active active2";
}
// trim() 去除空格
document.querySelector('input').onblur = function () {
if (this.value.trim() === "") {
this.value = "手机";
// 方法一：
// this.style.color = "#999";
// this.style.border = "1px solid #ccc";
// 方法二：
this.classList.remove("active", "active2");
// 方法三：
// this.className = "";
}
}
}