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

Ответ 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')

Но, конечно, есть непредвиденные обстоятельства. Не будет работать в 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 и впоследствии прочитать его без проблем.