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

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

109
cross-browser html javascript

4 ответов

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

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

142

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

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

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

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

32

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

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

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

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

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

6