如何使用JavaScript为HTML元素分配多个CSS类而不使用任何库？
JavaScript CSS如何向元素添加和删除多个CSS类
115
- anonymous
1
2从回答中我看到这里有些混淆。您想要能够将一组常量类应用于元素，还是想要能够向元素添加更多原始类？ - ProfK
19个回答
157
这里有一种更简单的方法可以通过
请注意，并非所有浏览器都原生支持ES6，因此像其他任何ES6答案一样，您可能需要使用转换器，例如Babel，或者只需坚持使用ES5并使用@LayZee上面的解决方案。
classList 添加多个类（所有现代浏览器都支持，如其他答案所述）：
div.classList.add('foo', 'bar'); // 添加多个类
From: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Examples
如果你有一个类名数组需要添加到元素中，你可以使用ES6扩展运算符将它们全部传递给classList.add()，通过这一行代码即可完成。let classesToAdd = [ 'foo', 'bar', 'baz' ];
div.classList.add(...classesToAdd);
请注意，并非所有浏览器都原生支持ES6，因此像其他任何ES6答案一样，您可能需要使用转换器，例如Babel，或者只需坚持使用ES5并使用@LayZee上面的解决方案。
- ericsoco
86
- Ryan
1
24你只需要用空格将每个类名分开：object.className =
"class1 class2 class3 " - Roy Hinkley45
这个可以正常运行：
myElement.className = 'foo bar baz';
- moff
1
11这不好，因为如果你想保留现有的课程，你会失去它们。 - Herman Van Der Blom
35
至少有几种不同的方式：
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");
- theMaxx
1
提供示例是好的，但如果您能解释哪些用例需要使用这些方法，那将非常有帮助。否则我们就像迷失在荒野中一样。 - Mentalist
15
var el = document.getElementsByClassName('myclass')
el[0].classList.add('newclass');
el[0].classList.remove('newclass');
要查找类是否存在，请使用：
el[0].classList.contains('newclass'); // this will return true or false
浏览器支持IE8+
- Mano bharathi
11
你可以使用不同的内置方法以相同的方式添加和删除多个类：
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');
- 1_bug
10
两种很棒的添加方式：
不过第一种方式更加清晰简洁，因为在第二种方式中你需要在开头添加一个空格。这样做是为了避免类名与前一个类名连接在一起。
element.classList.add("d-flex", "align-items-center");
element.className += " d-flex align-items-center";
如果要使用更干净的方式删除，可以使用classList。
element.classList.remove("d-grid", "bg-danger");
- james ace
9
由于我无法在任何地方找到这个答案：
ES6方式（现代浏览器）
el.classList.add("foo", "bar", "baz");
- Lemures
8
保证能够在新的浏览器上工作。旧的className方法可能无法工作，因为它已经被弃用。
<element class="oneclass" />
element.setAttribute('class', element.getAttribute('class') + ' another');
alert(element.getAttribute('class')); // oneclass another
- Tor Valamo
3
只需使用这个
element.getAttributeNode("class").value += " antherClass";
注意空格，避免旧类与新类混合
- Maged Rawash
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接