到目前为止,我必须这样做:
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");
我想知道是否有任何本地的方法来添加或删除。
当前回答
另一个元素填充。classList在这里。我是通过MDN找到的。
我包括该脚本,并使用element.classList.add(“第一”,“第二”,“第三”),因为它的意图。
其他回答
在字符串中添加由空格分隔的多个类的更好方法是使用带有split的Spread_syntax:
element.classList.add(...classesStr.split(" "));
向元素中添加类
document.querySelector(elem).className+=' first second third';
更新:
删除一个类
document.querySelector(elem).className=document.querySelector(elem).className.split(class_to_be_removed).join(" ");
classList属性确保重复的类不会不必要地添加到元素中。为了保持这个功能,如果你不喜欢手工版本或jQuery版本,我建议添加一个addMany函数和removmany到DOMTokenList (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) {...}
标准定义只允许添加或删除单个类。有几个小的包装器函数可以完成您的要求:
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(…类);