如何使用 setAttribute 在一個元素上設置多個類？

Question

如何將元素設置為具有多個類？

初步嘗試：

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

Answer 1

只需將屬性設置為正常。 它只是將屬性設置為您傳遞給它的任何字符串，它不知道如何處理值的任何特殊規則。

該屬性采用空格分隔的類列表，因此：

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

但是……舊版本（我認為 7 及更低版本）的 Internet Explorer 在它們的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/jasonennaro/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屬性（所有現代瀏覽器都支持）為元素添加多個類。

// 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";