到目前为止,我必须这样做:
elem.classList.add("first");
elem.classList.add("second");
elem.classList.add("third");
虽然这在 jQuery 中是可行的,但像这样
$(elem).addClass("first second third");
我想知道是否有任何本地方式来添加或删除。
到目前为止,我必须这样做:
elem.classList.add("first");
elem.classList.add("second");
elem.classList.add("third");
虽然这在 jQuery 中是可行的,但像这样
$(elem).addClass("first second third");
我想知道是否有任何本地方式来添加或删除。
elem.classList.add("first");
elem.classList.add("second");
elem.classList.add("third");
是平等的
elem.classList.add("first","second","third");
新的展开运算符使将多个 CSS 类应用为数组变得更加容易:
const list = ['first', 'second', 'third'];
element.classList.add(...list);
你可以像下面这样
添加
elem.classList.add("first", "second", "third");
消除
elem.classList.remove("first", "second", "third");
TLDR;
在直截了当的情况下,上述移除应该有效。但是在删除的情况下,您应该在删除它们之前确保类存在
const classes = ["first","second","third"];
classes.forEach(c => {
if (elem.classList.contains(c)) {
element.classList.remove(c);
}
})
该classList
属性可确保不会将重复的类不必要地添加到元素中。为了保持这个功能,如果你不喜欢普通版本或 jQuery 版本,我建议添加一个addMany
函数和removeMany
到DOMTokenList
(的类型classList
):
DOMTokenList.prototype.addMany = function(classes) {
var array = classes.split(' ');
for (var i = 0, length = array.length; i < length; i++) {
this.add(array[i]);
}
}
DOMTokenList.prototype.removeMany = function(classes) {
var array = classes.split(' ');
for (var i = 0, length = array.length; i < length; i++) {
this.remove(array[i]);
}
}
然后这些可以像这样使用:
elem.classList.addMany("first second third");
elem.classList.removeMany("first third");
更新
根据您的评论,如果您只想在未定义的情况下为这些编写自定义方法,请尝试以下操作:
DOMTokenList.prototype.addMany = DOMTokenList.prototype.addMany || function(classes) {...}
DOMTokenList.prototype.removeMany = DOMTokenList.prototype.removeMany || function(classes) {...}
由于add()
来自classList
just的方法允许传递单独的参数而不是单个数组,因此您需要add()
使用 apply调用。对于第一个参数,您需要传递classList
来自同一 DOM 节点的引用,并作为第二个参数传递要添加的类数组:
element.classList.add.apply(
element.classList,
['class-0', 'class-1', 'class-2']
);