到目前为止,我必须这样做:
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");
我想知道是否有任何本地的方法来添加或删除。
当前回答
下面是一个针对ie10和ie11用户的工作,看起来非常简单。
var elem = document.getElementById('elem'); ['first','second','three'].forEach(item => elem.classList.add(item)); <div id=“elem”>Hello World!</div>
Or
var elem = document.getElementById('elem'), 类 = [“第一”、“第二”、“第三”]; classes.forEach(function(item) { elem.classList.add(item); }); <div id=“elem”>Hello World!</div>
其他回答
另一个元素填充。classList在这里。我是通过MDN找到的。
我包括该脚本,并使用element.classList.add(“第一”,“第二”,“第三”),因为它的意图。
由于classList中的add()方法只允许传递单独的参数而不是单个数组,因此需要使用apply调用add()。对于第一个参数,你需要从相同的DOM节点传递classList引用,作为第二个参数,你想添加的类数组:
element.classList.add.apply(
element.classList,
['class-0', 'class-1', 'class-2']
);
你可以像下面这样做
Add
elem.classList.add("first", "second", "third");
// OR
elem.classList.add(...["first","second","third"]);
删除
elem.classList.remove("first", "second", "third");
// OR
elem.classList.remove(...["first","second","third"]);
参考
TLDR;
在上述直接的情况下,拆卸应该工作。但是在删除的情况下,应该在删除它们之前确保类存在
const classes = ["first","second","third"];
classes.forEach(c => {
if (elem.classList.contains(c)) {
element.classList.remove(c);
}
})
我喜欢@rich。kelly的答案,但我想使用与classList.add()(逗号分隔字符串)相同的命名法,因此稍有偏差。
DOMTokenList.prototype.addMany = DOMTokenList.prototype.addMany || function() {
for (var i = 0; i < arguments.length; i++) {
this.add(arguments[i]);
}
}
DOMTokenList.prototype.removeMany = DOMTokenList.prototype.removeMany || function() {
for (var i = 0; i < arguments.length; i++) {
this.remove(arguments[i]);
}
}
所以你可以使用:
document.body.classList.addMany('class-one','class-two','class-three');
我需要测试所有的浏览器,但这适用于Chrome。 我们是否应该检查一些比DOMTokenList.prototype.addMany的存在更具体的东西?究竟是什么原因导致classList.add()在IE11中失败?
在字符串中添加由空格分隔的多个类的更好方法是使用带有split的Spread_syntax:
element.classList.add(...classesStr.split(" "));