Как я могу использовать 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

если вы хотите добавить (не уничтожать текущие классы), я бы сделал

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

Answer 5

Не используйте запятые. Просто установите имя класса с пробелами между несколькими классами. Я бы использовал jQuery метод addClass - если вы используете jQuery:).

Answer 6

Безопасно использовать element.className += "classname", чтобы новый класс добавлялся в список уже существующих классов.

Answer 7

Не будет ли это правильным ответом:

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

Никогда не видел, чтобы это делалось с использованием className таким образом (например, yourDiv.className ...).

Answer 8

Легко, если вы можете подключить его к ID

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

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

Answer 9

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

или даже

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

Это с переписать все предыдущие классы.В современных браузерах каждый элемент DOM также имеет коллекцию classList, к которой вы можете получить доступ.Он имеет методы add, remove и toggle.Это хороший пример того, как фреймворки javascript влияют на стандартные API.