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

128

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

javascript html cross-browser dev.e.loper
источник

Ответы:

163

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

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

и я
источник
5
это работает. он создает атрибут, если он не существует, и обновляет его, если он существует. это где-то задокументировано, насколько это работает?
dev.e.loper 02
@ dev.e.loper DOM spec - хорошее место для начала: w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/…
valentinas
1
Когда я делаю следующее: document.getElementById("nav").setAttribute("class", "active");он работает в консоли Chrome JS, но на фактической странице не работает .. есть идеи? Кстати, на самой странице я включаю .jsфайл до конца области bodyвидимости.
knownasilya 08
36

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

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

Допустим, вам нужно добавить идентификатор div1. 

e['id'] = 'div1';
e.id = 'div1';
e.attributes['id'] = 'div1';
e.createAttribute('id','div1')
Все они будут работать, за исключением последнего в IE 5.5 (который на данный момент является древней историей, но по-прежнему используется XP по умолчанию без обновлений).

Но, конечно, есть непредвиденные обстоятельства. Не будет работать в IE до 8: e.attributes['style'] не будет ошибки, но фактически не будет устанавливать класс, это должно быть className : e['class'].
Однако, если вы используете атрибуты, это БУДЕТ работать:e.attributes['class']

Таким образом, считайте атрибуты буквальными и объектно-ориентированными.

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

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

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

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

JPearce
источник
5
Windows XP вышла с IE6, а не 5.5. Это было бы ужасно.
mgol 04
Это работает id, а не с чем-то еще вродеdata-toggle
stallingOne
30

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

$('#element').attr( 'title', 'foo' );
tvanfosson
источник
3
+1 за решение jQuery. В моем случае я пытался избежать jQuery и создать его на чистом javascript из-за требований моей работы. Я рад, что существуют оба ответа. Спасибо.
NuclearPeon
7

Что вы хотите сделать с атрибутом? Это атрибут html или что-то свое?

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

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

annakata
источник