到目前为止,我必须这样做:
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");
我想知道是否有任何本地的方法来添加或删除。
当前回答
假设你有一个要添加的类数组,你可以使用ES6扩展语法:
Let classes = ['first', 'second', 'third']; elem.classList.add(…类);
其他回答
下面是一个针对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>
标准定义只允许添加或删除单个类。有几个小的包装器函数可以完成您的要求:
function addClasses (el, classes) {
classes = Array.prototype.slice.call (arguments, 1);
console.log (classes);
for (var i = classes.length; i--;) {
classes[i] = classes[i].trim ().split (/\s*,\s*|\s+/);
for (var j = classes[i].length; j--;)
el.classList.add (classes[i][j]);
}
}
function removeClasses (el, classes) {
classes = Array.prototype.slice.call (arguments, 1);
for (var i = classes.length; i--;) {
classes[i] = classes[i].trim ().split (/\s*,\s*|\s+/);
for (var j = classes[i].length; j--;)
el.classList.remove (classes[i][j]);
}
}
这些包装器允许您将类列表指定为单独的参数、用空格或逗号分隔的字符串或组合。有关示例,请参见http://jsfiddle.net/jstoolsmith/eCqy7
你可以像下面这样做
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);
}
})
向元素中添加类
document.querySelector(elem).className+=' first second third';
更新:
删除一个类
document.querySelector(elem).className=document.querySelector(elem).className.split(class_to_be_removed).join(" ");
在字符串中添加由空格分隔的多个类的更好方法是使用带有split的Spread_syntax:
element.classList.add(...classesStr.split(" "));