Як додати / оновити атрибут до елемента 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

@ dev.e.loper специфікація DOM - це гарне місце для початку: w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/…

— valentinas

1

Коли я виконую наступне: document.getElementById("nav").setAttribute("class", "active");він працює в консолі Chrome JS, але на фактичній сторінці він не працює ... багато ідей? До речі, на власне сторінці я включаю .jsфайл до кінця bodyобласті.

— knownasilya

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'].
Однак якщо ви використовуєте атрибути, це WILL працює:e.attributes['class']

Підводячи підсумок, подумайте про атрибути як буквальні та об'єктно-орієнтовані.

У буквальному сенсі ви просто хочете, щоб він виплюнув x = 'y', а не думав про це. Це те, для чого призначені атрибути, setAttribute, createAttribute (за винятком стилю IE). Але оскільки це справді об’єкти, речі можуть заплутатися.

Оскільки у вас виникнуть проблеми з правильним створенням елемента DOM замість jQuery innerHTML slop, я ставлюся до нього як до одного і дотримуйтесь e.className = 'fooClass' і e.id = 'fooID'. Це вподобання дизайну, але в цьому випадку намагатися ставитися до цього, як ні до чого, крім предмета, працює проти вас.

Він ніколи не буде спрацьовувати з вами, як інші методи, просто пам’ятайте про те, що клас є className, а стиль є об’єктом, тому це style.width не style = "width: 50px". Також пам’ятайте tagName, але це вже встановлено createElement, тому вам не потрібно буде турбуватися про це.

Це було довше, ніж я хотів, але маніпуляція CSS в JS - справа хитра.

— JPearce
джерело

5

Windows XP вийшов з IE6, а не 5.5. Це було б жахливо.

— мгголь

Це працює з id, а не з чимось іншим на кшталтdata-toggle

— затримка

30

Обов’язкове рішення jQuery . Знаходить і встановлює titleатрибут foo. Зверніть увагу, що це вибирає один елемент, оскільки я це роблю за id, але ви можете легко встановити той самий атрибут для колекції, змінивши селектор.

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

— тванфоссон
джерело

3

+1 для рішення jQuery. У моєму випадку я намагався уникати jQuery і виробляти його в чистому JavaScript через вимоги моєї роботи. Я радий, що обидві відповіді існують. Дякую.

— NuclearPeon

7

Що ви хочете зробити з атрибутом? Це атрибут html чи щось своє?

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

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

— аннаката
джерело