Javascript 如何使用 setAttribute 在一个元素上设置多个类？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6860213/
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
How can I use setAttribute to set multiple classes on an element?
提问by OVERTONE
How can I set an element to have multiple classes?
如何将元素设置为具有多个类？
Initial attempt:
初步尝试：
element.setAttribute("class","class1","class2");
element.className="class1 , class2";
element.class="class1 , class2";
回答by Quentin
Just set the attribute as normal. It just sets the attribute to whatever string you pass it, it isn't aware of any special rules for how the value gets handled.
只需将属性设置为正常。它只是将属性设置为您传递给它的任何字符串，它不知道如何处理值的任何特殊规则。
The attribute takes a space separated list of classes so:
该属性采用空格分隔的类列表，因此：
element.setAttribute("class","class1 class2");
However… older versions (I think 7 and lower) of Internet Explorer have serious bugs in their setAttributeimplementation — so don't use it. Use the classNameproperty instead.
但是……旧版本（我认为 7 及更低版本）的 Internet Explorer 在其setAttribute实现中存在严重的错误— 所以不要使用它。请改用该className属性。
element.className = "class1 class2";
Note, also, that these are HTML classes. They uses beyond the application of styles. There is no such thing as a CSS class (although there are class selectors, other selectors, rule sets and properties, all of which have been (incorrectly and confusingly) called "classes" at some time or another).
另请注意，这些是HTML 类。它们的用途超出了样式的应用范围。没有 CSS 类这样的东西（尽管有类选择器、其他选择器、规则集和属性，所有这些都曾被（错误地和令人困惑地）称为“类”）。
回答by entonio
The attribute classNameis a space-separated list of values.
该属性className是一个以空格分隔的值列表。
回答by Dave
Try this:
尝试这个：
document.getElementById("MyElement").className = "class1 class2";
(notice the space instead of comma between the two names)
（注意两个名字之间的空格而不是逗号）
Or, if you want to add on to the classes already there:
或者，如果您想添加到已有的类：
document.getElementById("MyElement").className += " class1 class2";
回答by Tim Hoolihan
if you're looking to append (not destory current classes), I would do
如果你想追加（而不是破坏当前的课程），我会做
element.className = element.className + " anotherclass yetanotherclass"
回答by ek_ny
Don't use commas. Just set the class name with spaces between multiple classes. I would use jQuery addClass method- if you are are using jQuery :).
不要使用逗号。只需在多个类之间设置带有空格的类名。我会使用 jQuery addClass 方法 - 如果您使用的是 jQuery :)。
回答by shabunc
`element.className = "class1" + " class2" + " class3"`;
or even
甚至
element.className = ["class1","class2","class3"].join(" ")
This with rewrite all previous classes.
In modern browsers every DOM element also have a classListcollection you can access. It has add, removeand togglemethods. It is a good example of how javascript frameworks influenced standard APIs itself.
这与重写所有以前的类。在现代浏览器中，每个 DOM 元素都有一个classList可以访问的集合。它有add,remove和toggle方法。这是 javascript 框架如何影响标准 API 本身的一个很好的例子。
回答by Jason Gennaro
Easy if you can hook it to an ID
如果你能把它挂到一个 ID
document.getElementById("a").className = "newClass anotherClass";
回答by Stuart
Wouldn't this be the correct answer:
这不是正确的答案吗：
var yourDiv = document.getElementById("divName");
yourDiv.SetAttribute("class","RedClass");
yourDiv.SetAttribute("className","RedClass");
Never seen it done using classNamelike that (e.g., yourDiv.className...).
从未见过这样使用className它（例如，yourDiv.className...）。
回答by johnmanoahs
It is safe to use element.className += "classname"so that the new class gets appended to the list of classes already present.
使用它是安全的，element.className += "classname"这样新类就会附加到已经存在的类列表中。
回答by SridharKritha
Even withoutusing setAttributeyou could add multiple classes for an element by classListproperty (which is supported by all modern browsers).
即使不使用setAttribute，您也可以通过classList属性（所有现代浏览器都支持）为元素添加多个类。
// add or remove multiple classes
element.classList.add("foo", "bar", "baz");
element.classList.remove("foo", "bar", "baz");
Few more useful stuffs you can do using classList
您可以使用classList做更多有用的事情
Find and Replace:
查找和替换：
// replace class "foo" with class "bar"
element.classList.replace("foo", "bar");
Check for class existence:
检查类是否存在：
// check a class is exist for the element
console.log(element.classList.contains("foo")); // return true/false
Toggle class in/out:
切换类进/出：
// add the class 'foo' if the element doesn't have class 'foo'
// remove the class 'foo' if the element has the class 'foo'
console.log(element.classList.toggle("foo")); // true - class was added otherwise false.
