Question

如何将元素设置为具有多个类？

初步尝试：

element.setAttribute("class","class1","class2");
element.className="class1 , class2";
element.class="class1 , class2";

Answer 1

只需将属性设置为正常。它只是将属性设置为您传递的任何字符串，它不知道有关如何处理值的任何特殊规则。

该属性采用空格分隔的类列表，所以：

element.setAttribute("class","class1 class2");

然而...... Internet Explorer的旧版本（我认为7及更低版本）在setAttribute实施中存在严重错误 - 所以不要使用它。请改用className属性。

element.className = "class1 class2";

另请注意，这些是 HTML类。他们使用超越风格的应用。没有CSS类这样的东西（尽管有类选择器，其他选择器，规则集和属性，所有这些都在某些时间（错误和混淆地）被称为“类”）。

Answer 2

属性className是以空格分隔的值列表。

Answer 3

试试这个：

document.getElementById("MyElement").className = "class1 class2";

（注意空格而不是两个名字之间的逗号）

或者，如果你想添加已经存在的类：

    document.getElementById("MyElement").className += " class1 class2";

Answer 4

请勿使用逗号。只需在多个类之间设置带有空格的类名。我会使用jQuery addClass方法 - 如果你正在使用jQuery：）。

Answer 5

如果你想附加（不破坏当前的类），我会做

element.className = element.className + " anotherclass yetanotherclass"

Answer 6

`element.className = "class1" + " class2" + " class3"`;

甚至

element.className = ["class1","class2","class3"].join(" ")

这包括重写所有以前的类。在现代浏览器中，每个DOM元素都有一个可以访问的classList集合。它有add，remove和toggle方法。这是javascript框架如何影响标准API本身的一个很好的例子。

Answer 7

如果您可以将其挂钩到ID

，则很容易

document.getElementById("a").className = "newClass anotherClass";

http://jsfiddle.net/jasongennaro/qaBQv/1/

Answer 8

这不是正确的答案：

var yourDiv = document.getElementById("divName");
yourDiv.SetAttribute("class","RedClass"); 
yourDiv.SetAttribute("className","RedClass");

从未见过像这样使用className（例如，yourDiv.className ...）。

Answer 9

使用element.className += "classname"是安全的，以便将新类附加到已存在的类列表中。

Answer 10

即使使用 setAttribute 无，您也可以通过 classList 属性（所有现代浏览器都支持）为一个元素添加多个类。 / p>

// add or remove multiple classes
element.classList.add("foo", "bar", "baz");
element.classList.remove("foo", "bar", "baz");

使用 classList

可以做的更多有用的事情

查找并替换：

// replace class "foo" with class "bar"
element.classList.replace("foo", "bar");

检查班级是否存在：

// check a class is exist for the element
console.log(element.classList.contains("foo")); // return true/false

切换班级进/出：

// 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.

Answer 11

最简单的方法是

Element.className = "class1 class2";

如何使用setAttribute在元素上设置多个类？

11 个答案: