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

Question

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

Answer 1

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

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

Answer 2

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

<code>var e = document.createElement('div');

Допустим, у вас есть id 'div1' для добавления.

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

Все они будут работать, кроме последнего в IE 5.5 (который на данный момент является древней историей, но все еще является XP по умолчанию без обновлений).

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

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

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

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

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

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

Answer 3

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

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

Answer 4

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

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

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