是否有一种方法可以在使用classList的单个指令中添加/删除多个类?

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

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

这在jQuery中是可以实现的，就像这样

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

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

当前回答

一个非常简单，不花哨，但有效的解决方案，我不得不相信是非常跨浏览器的:

创建这个函数

函数removeAddClasses(班级名册,removeCollection addCollection) { for (var i=0;i< removeccollection .length;i++){ classList.remove (removeCollection[我]); ｝ for (var i=0;i<addCollection.length;i++){ classList.add (addCollection[我]); ｝｝

这样叫它: removeAddClasses (node.classList arrayToRemove arrayToAdd);

.．.其中arrayToRemove是要删除的类名数组: (“myClass1”、“myClass2”)等等

.．.and arrayToAdd是一个要添加的类名数组: (“myClass3”、“myClass4”)等等

2018-08-12 20:24:50

其他回答

向元素中添加类

document.querySelector(elem).className+=' first second third';

更新:

删除一个类

document.querySelector(elem).className=document.querySelector(elem).className.split(class_to_be_removed).join(" ");

2012-06-20 08:56:59

我发现了一个非常简单的方法，更现代和优雅的方式。


const el = document.querySelector('.m-element');

// To toggle
['class1', 'class2'].map((e) => el.classList.toggle(e));

// To add
['class1', 'class2'].map((e) => el.classList.add(e));

// To remove
['class1', 'class2'].map((e) => el.classList.remove(e));

好在你可以很容易地扩展类数组或使用任何来自API的类数组。

2020-11-08 12:33:25

另一个元素填充。classList在这里。我是通过MDN找到的。

我包括该脚本，并使用element.classList.add(“第一”，“第二”，“第三”)，因为它的意图。

2016-01-16 17:25:15

假设你有一个要添加的类数组，你可以使用ES6扩展语法:

Let classes = ['first'， 'second'， 'third']; elem.classList.add(…类);

2017-05-23 08:06:11

一个非常简单，不花哨，但有效的解决方案，我不得不相信是非常跨浏览器的:

创建这个函数

这样叫它: removeAddClasses (node.classList arrayToRemove arrayToAdd);

.．.其中arrayToRemove是要删除的类名数组: (“myClass1”、“myClass2”)等等