有没有办法使用 classList 在一条指令中添加/删除多个类?

IT技术 javascript html
2021-02-11 05:24:02

到目前为止,我必须这样做:

elem.classList.add("first");
elem.classList.add("second");
elem.classList.add("third");

虽然这在 jQuery 中是可行的,但像这样

$(elem).addClass("first second third");

我想知道是否有任何本地方式来添加或删除。

6个回答
elem.classList.add("first");
elem.classList.add("second");
elem.classList.add("third");

是平等的

elem.classList.add("first","second","third");
你有没有考虑过 el.className += "my classes here"
2021-03-15 05:24:02
在撰写本文时,Firefox 也不支持它。 我的回答提供了一个 polyfill。
2021-03-16 05:24:02
如果你想应用多个类名的数组,你必须调用: DOMTokenList.prototype.add.apply(elem.classList, ['first', 'second', 'third']);
2021-03-22 05:24:02
有没有办法删除多个类
2021-03-31 05:24:02
@Vicky两个方法都基于相同的elem.classList.remove("first","second","third");addremoveDOMTokenList
2021-04-07 05:24:02

新的展开运算符使将多个 CSS 类应用为数组变得更加容易:

const list = ['first', 'second', 'third'];
element.classList.add(...list);
我可以使用 aDOMTokenList而不是数组吗?我知道 DOMTokenList 是一个类似数组的对象。那么可以在classList.add()方法中使用它还是必须将 DOMTokenList 转换为真实数组?
2021-03-15 05:24:02
接受的答案适用于直接的值列表,但这个适用于数组......两者似乎都是很好的答案!
2021-03-28 05:24:02

你可以像下面这样

添加

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函数和removeManyDOMTokenList(的类型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) {...}
还是一个很好的答案。我无法为您编辑它,因为它只有 2 个字符。
2021-03-14 05:24:02

由于add()来自classListjust方法允许传递单独的参数而不是单个数组,因此您需要add()使用 apply调用对于第一个参数,您需要传递classList来自同一 DOM 节点引用,并作为第二个参数传递要添加的类数组:

element.classList.add.apply(
  element.classList,
  ['class-0', 'class-1', 'class-2']
);
它是带有扩展运算符的 ES5 版本解决方案(请参阅 @morkro答案)。Babel Repl 上轻松检查
2021-03-16 05:24:02