到目前为止,我必须这样做:
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");
我想知道是否有任何本地的方法来添加或删除。
当前回答
我发现了一个非常简单的方法,更现代和优雅的方式。
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的类数组。
其他回答
elem.classList.add("first");
elem.classList.add("second");
elem.classList.add("third");
是相等的
elem.classList.add("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”)等等
标准定义只允许添加或删除单个类。有几个小的包装器函数可以完成您的要求:
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
假设你有一个要添加的类数组,你可以使用ES6扩展语法:
Let classes = ['first', 'second', 'third']; elem.classList.add(…类);
我喜欢@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中失败?