Доступ к атрибуту DOM: почему не работает elt.class?

Question

У меня есть этот код JavaScript:

var elt = document.createElement("div");
elt.class = "class_1";

В моем CSS должен быть стиль, связанный с .class_1, но по какой-то причине он действительно не применяется. Потратив несколько часов на то, чтобы понять, что пошло не так, я попробовал эту альтернативу:

elt.setAttribute("class", "class_1");

и это сработало ....

Это странно, поскольку в другой части моего кода я использовал elt.id, и он работал просто отлично. Сначала я думал, что это кросс-браузерная проблема, но оказалось, что "elt.class" не работает во всех браузерах.

Это ошибка в нативном Javascript DOM? Может кто-нибудь объяснить, почему это так или я сделал что-то не так? Благодарю. Будем благодарны за все ответы / ответы.

Answer 1

Свойства и атрибуты разные вещи.Атрибутами являются строки, которые вы видите в коде документа, доступные для любого типа документа с помощью DOM Core метода getAttribute:

<a id="foo" href="bar" tabindex="1" onclick="alert()" class="bof" potato="lemon">

a.getAttribute('id')         // string "foo"
a.getAttribute('href')       // string "bar"
a.getAttribute('tabindex')   // string "1"
a.getAttribute('onclick')    // string "alert()"
a.getAttribute('class')      // string "bof"
a.getAttribute('potato')     // string "lemon"

, тогда как свойства доступны непосредственно для объекта, являются специализированными и специфичными для типа документа (например, определены в DOM HTML или HTML5 ) и, как правило, являются более удобочитаемыми вспомогательными средствами.Хотя они часто отражают то же самое, что и атрибут, они могут различаться по имени, значению, типу или назначению.

a.id                         // string "foo"
a.href                       // string "http://www.example.com/base/bar"
a.tabIndex                   // integer 1
a.onclick                    // function() { alert(); }
a.className                  // string "bof"
a.potato                     // undefined

Таким образом, в то время как id приводит к одному и тому же значению, href и всемдругие свойства URL становятся абсолютными по отношению к документу;tabIndex и другие числовые свойства возвращают число вместо литеральной строки;onclick и другие свойства обработчика событий возвращают объект функции JS, а свойства, чье имя конфликтует с общими зарезервированными словами, такими как class (не только зарезервированные слова JavaScript, поскольку DOM является стандартом межязыкового языка), переименовываются (см.также: htmlFor), а нестандартные атрибуты вообще недоступны в качестве свойств.Другие ошибки: value / selected / checked на входах отражают current содержимое поля формы;атрибуты с одинаковыми именами являются начальными значениями defaultValue / defaultSelected / defaultChecked.

[Кроме того, IE <8 имеет реальную проблему при разнице между атрибутами и свойствами и возвращает неправильное значениевещь за <code>getAttribute во всех случаях, когда они отличаются.Не позволяйте этому сбить вас с толку, и по этой причине избегайте использования getAttribute для доступа к свойствам HTML DOM.]

Answer 2

«класс» является зарезервированным словом в JavaScript, поэтому DOM использует className для отражения текущего класса (ов) элемента. Это представлено в виде строки. Пример: "foo bar baz" (элемент с классами foo, bar и baz)

См. https://developer.mozilla.org/en/DOM/element.className для примеров того, как его использовать.

Answer 3

Класс - зарезервированное слово.Для доступа к атрибуту класса используйте className.elt.className = "class_1";

Answer 4

var elt = document.createElement("div");
elt.className = "class_1";