删除一个类
现代浏览器提供了一个 classList
对象,以便于操作元素的 class 属性。较旧的浏览器需要直接操作元素的 className
属性。
*注意类名不以任何特定顺序存储在元素的属性中
W3C DOM < 4
从元素中删除一个类需要对 className
属性进行一些操作。
var toRemove = "bar",
el = document.getElementById("link1");
el.className = el.className.replace(new RegExp("\\b" + toRemove + "\\b", "g"), "").trim();
删除多个类名需要循环。其余示例将使用函数来隔离工作
function removeClass(el, name) {
name = name.split(/\s+/);
var index = name.length,
classes = el.className;
while (index--) {
classes = classes.replace(new RegExp("\\b" + name[index] + "\\b", "g"), "").trim();
}
el.className = classes;
}
var el = document.getElementById("link1");
removeClass(el, "bar baz");
要删除多个类名的多个元素需要两个循环
function removeClass(els, name) {
name = name.split(/\s+/);
var regex, len,
index = name.length;
while (index--) {
regex = new RegExp("\\b" + name[index] + "\\b", "g");
len = els.length;
while (len--) {
els[len].className = els[len].className.replace(regex, "").trim();
}
}
}
var els = document.getElementsByTagName("a");
removeClass(els, "bar baz");
W3C DOM >= 4
单个类名可以作为字符串删除。要删除多个类名,请使用 ES6 的扩展运算符:
document.querySelector("#link1").classList.remove("foo");
document.querySelector("#link2").classList.remove(...['foo', 'bar']);
对于多个元素,你需要删除循环内的类名
document.querySelectorAll(".foo").forEach(el => {
el.classList.remove(...['bar', 'baz']);
});