到目前为止,我必须这样做:
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(“第一”,“第二”,“第三”),因为它的意图。
下面是一个针对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>
一个非常简单,不花哨,但有效的解决方案,我不得不相信是非常跨浏览器的:
创建这个函数
函数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”)等等
我发现了一个非常简单的方法,更现代和优雅的方式。
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的类数组。
新的展开操作符使应用多个CSS类作为数组更加容易:
const list = ['first', 'second', 'third'];
element.classList.add(...list);