向元素中添加类

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

更新:

删除一个类

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

最好的解决方案之一是检查元素是否存在，然后继续添加或删除元素，最重要的是，如果元素为空，则删除它。

/** * @description detect if obj is an element * @param {*} obj * @returns {Boolean} * @example * see below */ function isElement(obj) { if (typeof obj !== 'object') { return false } let prototypeStr, prototype do { prototype = Object.getPrototypeOf(obj) // to work in iframe prototypeStr = Object.prototype.toString.call(prototype) // '[object Document]' is used to detect document if ( prototypeStr === '[object Element]' || prototypeStr === '[object Document]' ) { return true } obj = prototype // null is the terminal of object } while (prototype !== null) return false } /* * Add multiple class * addClasses(element,['class1','class2','class3']) * el: element | document.querySelector(".mydiv"); * classes: passing:: array or string : [] | 'cl1,cl2' | 'cl1 cl2' | 'cl1|cl2' */ function addClasses(el, classes) { classes = Array.prototype.slice.call(arguments, 1); if ( isElement(el) ){ //if (document.body.contains(el) for (var i = classes.length; i--;) { classes[i] = Array.isArray(classes[i]) ? classes[i]: classes[i].trim().split(/\s*,\s*|\s+/); for (var j = classes[i].length; j--;) el.classList.add(classes[i][j]); } } } /* * Remove multiple class * Remove attribute class is empty * addClasses(element,['class1','class2','class3']) * el: element | document.querySelector(".mydiv"); * classes: passing:: array or string : [] | 'cl1,cl2' | 'cl1 cl2' | 'cl1|cl2' */ function removeClasses(el, classes) { classes = Array.prototype.slice.call(arguments, 1); if ( isElement(el) ) { for (var i = classes.length; i--;) { classes[i] = Array.isArray(classes[i]) ? classes[i]: classes[i].trim().split(/\s*,\s*|\s+/); for (var j = classes[i].length; j--;) el.classList.remove(classes[i][j]); let cl = el.className.trim(); if (!cl){ el.removeAttribute('class'); } } } } var div = document.createElement("div"); div.id = 'test'; // div.setAttribute("id", "test"); div.textContent = 'The World'; //div.className = 'class'; // possible use: afterend, beforeend document.body.insertAdjacentElement('beforeend', div); // Everything written above you can do so: //document.body.insertAdjacentHTML('beforeend', '<div id="text"></div>'); var el = document.querySelector("#test"); addClasses(el,'one,two,three,four'); removeClasses(el,'two,two,never,other'); el.innerHTML = 'I found: '+el.className; // return : I found: four three one #test { display: inline-block; border: 1px solid silver; padding: 10px; }

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

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的类数组。

向元素中添加类

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) {...}

新的展开操作符使应用多个CSS类作为数组更加容易:

const list = ['first', 'second', 'third'];
element.classList.add(...list);