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

Posted 2023-02-21

【中文标题】如何使用 setAttribute 在一个元素上设置多个类？

【英文标题】：How can I use setAttribute to set multiple classes on an element?

【发布时间】：2011-10-15 04:04:54

【问题描述】：

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

初始尝试：

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

【问题讨论】：

元素最初是否设置了任何类？

【参考方案1】：

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

该属性采用空格分隔的类列表，因此：

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

但是…… Internet Explorer 的旧版本（我认为是 7 和更低版本）在其 setAttribute 实现中存在严重错误 — 所以不要使用它。请改用className 属性。

element.className = "class1 class2";

还要注意，这些是html 类。他们使用超出样式的应用程序。没有 CSS 类之类的东西（尽管有类选择器、其他选择器、规则集和属性，所有这些都曾（不正确且容易混淆地）在某个时候被称为“类”）。

【讨论】：

所以 ',' 一定是在绊倒我。谢谢

element.className = "class1 class2"; => 在 IE8 中只设置第一个类名

【参考方案2】：

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

【参考方案3】：

试试这个：

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

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

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

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

【参考方案4】：

如果你想追加（而不是破坏当前类），我会这样做

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

【参考方案5】：

不要使用逗号。只需在多个类之间使用空格设置类名。我会使用 jQuery addClass 方法——如果你使用的是 jQuery :)。

【参考方案6】：

使用element.className += "classname" 是安全的，这样新类就会被附加到已经存在的类列表中。

【讨论】：

应该是 element.className += "classname" （注意与其他人分开的空间）

【参考方案7】：

如果您可以将其连接到 ID 就很容易

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

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

【参考方案8】：

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

甚至

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

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

【讨论】：

这不起作用，因为类名不会用空格分隔，这是必要的。

哦@Jason，完全没问题。我们生活在一个残酷的世界中，在生成代码时应该非常小心（sn-ps）

【参考方案9】：

这不是正确答案吗：

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

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

【参考方案10】：

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

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

【参考方案11】：

最简单的方法是

Element.className = "class1 class2";