JavaScript CSS 如何向一个元素添加和删除多个 CSS 类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1988514/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript CSS how to add and remove multiple CSS classes to an element
提问by anonymous
How can assign multiple css classes to an html element through javascript without using any libraries?
如何在不使用任何库的情况下通过 javascript 将多个 css 类分配给一个 html 元素？
采纳答案by Ryan
回答by ericsoco
Here's a simpler method to add multiple classes via classList(supported by all modern browsers, as noted in other answers here):
这是一种通过以下方式添加多个类的更简单方法classList（所有现代浏览器都支持，如此处的其他答案中所述）：
div.classList.add('foo', 'bar'); // add multiple classes
div.classList.add('foo', 'bar'); // add multiple classes
From: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Examples
来自：https: //developer.mozilla.org/en-US/docs/Web/API/Element/classList#Examples
If you have an array of class names to add to an element, you can use the ES6 spread operatorto pass them all into classList.add()via this one-liner:
如果您有要添加到元素的类名数组，则可以使用ES6 扩展运算符classList.add()通过以下单行将它们全部传入：
let classesToAdd = [ 'foo', 'bar', 'baz' ];
div.classList.add(...classesToAdd);
Note that not all browsers support ES6 natively yet, so as with any other ES6 answer you'll probably want to use a transpiler like Babel, or just stick with ES5 and use a solution like @LayZee's above.
请注意，并非所有浏览器都原生支持 ES6，因此与任何其他 ES6 答案一样，您可能想要使用像Babel这样的转译器，或者只是坚持使用 ES5 并使用像上面@LayZee 这样的解决方案。
回答by moff
This works:
这有效：
myElement.className = 'foo bar baz';
回答by Mano bharathi
var el = document.getElementsByClassName('myclass')
el[0].classList.add('newclass');
el[0].classList.remove('newclass');
To find whether the class exists or not, use:
要查找该类是否存在，请使用：
el[0].classList.contains('newclass'); // this will return true or false
Browser support IE8+
浏览器支持 IE8+
回答by theMaxx
There are at least a few different ways:
至少有几种不同的方式：
var buttonTop = document.getElementById("buttonTop");
buttonTop.className = "myElement myButton myStyle";
buttonTop.className = "myElement";
buttonTop.className += " myButton myStyle";
buttonTop.classList.add("myElement");
buttonTop.classList.add("myButton", "myStyle");
buttonTop.setAttribute("class", "myElement");
buttonTop.setAttribute("class", buttonTop.getAttribute("class") + " myButton myStyle");
buttonTop.classList.remove("myElement", "myButton", "myStyle");
回答by Tor Valamo
guaranteed to work on new browsers. the old className way may not, since it's deprecated.
保证在新的浏览器上工作。旧的 className 方式可能不会，因为它已被弃用。
<element class="oneclass" />
element.setAttribute('class', element.getAttribute('class') + ' another');
alert(element.getAttribute('class')); // oneclass another
回答by Lemures
Since I could not find this answer nowhere:
由于我无法在任何地方找到这个答案：
ES6 way (Modern Browsers)
ES6 方式（现代浏览器）
el.classList.add("foo", "bar", "baz");
回答by 1_bug
You can add and remove multiple classes in same way with different in-built methods:
您可以使用不同的内置方法以相同的方式添加和删除多个类：
const myElem = document.getElementById('element-id');
//add multiple classes
myElem.classList.add('class-one', 'class-two', 'class-three');
//remove multiple classes
myElem.classList.remove('class-one', 'class-two', 'class-three');
回答by tarnfeld
Perhaps:
也许：
document.getElementById("myEle").className = "class1 class2";
Not tested, but should work.
未经测试，但应该可以工作。
回答by Maged Rawash
just use this
就用这个
element.getAttributeNode("class").value += " antherClass";
take care about Space to avoid mix old class with new class
注意空间避免将旧类与新类混合
