Как добавить/обновить атрибут элемента HTML с помощью JavaScript?

Я пытаюсь найти способ добавления/обновления атрибута с помощью JavaScript. Я знаю, что могу сделать это с помощью функции setAttribute(), но это не работает в IE.

Ответ 1

Вы можете прочитать здесь о поведении атрибутов во многих разных браузерах, включая IE.

element.setAttribute() должен делать трюк даже в IE. Вы попробовали? Если это не сработает, возможно, element.attributeName = 'value' может работать.

Ответ 2

То, что кажется простым, на самом деле сложно, если вы хотите быть полностью совместимым.

var e = document.createElement('div');

Скажем, у вас есть идентификатор 'div1' для добавления.

e['id'] = 'div1';
e.id = 'div1';
e.attributes['id'] = 'div1';
e.createAttribute('id','div1')

These will all work except the last in IE 5.5 (which is ancient history at this point but still is XP default with no updates).

Но, конечно, есть непредвиденные обстоятельства. Не будет работать в IE до 8: e.attributes['style'] Не будет ошибки, но на самом деле не будет устанавливать класс, он должен быть классомName: e['class'].
Однако, если вы используете атрибуты, то этот WILL работает: e.attributes['class']

В целом, подумайте об атрибутах как о буквальном, так и о объектно-ориентированном.

В буквальном, вы просто хотите, чтобы он выплевывал x = 'y' и не думал об этом. Это атрибуты, setAttribute, createAttribute для (за исключением исключения в стиле IE). Но поскольку это действительно объекты, вещи могут запутаться.

Поскольку у вас возникла проблема правильного создания элемента DOM вместо jQuery innerHTML slop, я бы рассматривал его как один и придерживался e.className = 'fooClass' и e.id = 'fooID'. Это предпочтение дизайна, но в этом случае попытка лечения - это нечто иное, чем объект работает против вас.

Это никогда не будет иметь неприятных последствий для вас, как другие методы, просто знайте, что class является классомName, а стиль - объектом, поэтому style.width не style = "width: 50px". Также помните tagName, но это уже установлено createElement, поэтому вам не нужно беспокоиться об этом.

Это было дольше, чем я хотел, но манипуляции с CSS в JS - сложный бизнес.

Ответ 3

Обязательное решение jQuery. Находит и устанавливает атрибут title на foo. Обратите внимание, что это выбирает один элемент, так как я делаю его по id, но вы можете легко установить один и тот же атрибут в коллекции, изменив селектор.

$('#element').attr( 'title', 'foo' );

Ответ 4

Что вы хотите сделать с атрибутом? Является ли это атрибутом html или чем-то вроде вашего?

В большинстве случаев вы можете просто обратиться к нему как к свойству: хотите установить заголовок элемента? element.title = "foo" сделает это.

Для ваших собственных JS-атрибутов DOM является естественным расширением (aka expando = true), простым результатом которого является то, что вы можете сделать element.myCustomFlag = foo и впоследствии прочитать его без проблем.