Как добавить атрибут в html через js

Атрибуты и DOM-свойства

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/dom-attributes-and-properties.

При чтении HTML браузер генерирует DOM-модель. При этом большинство стандартных HTML-атрибутов становятся свойствами соответствующих объектов.

Например, если тег выглядит как , то у объекта будет свойство body.id = «page» .

Но это преобразование – не один-в-один. Бывают ситуации, когда атрибут имеет одно значение, а свойство – другое. Бывает и так, что атрибут есть, а свойства с таким названием не создаётся.

Если коротко – HTML-атрибуты и DOM-свойства обычно, но не всегда соответствуют друг другу, нужно понимать, что такое свойство и что такое атрибут, чтобы работать с ними правильно.

Свои DOM-свойства

Ранее мы видели некоторые встроенные свойства DOM-узлов. Но, технически, никто нас ими не ограничивает.

Узел DOM – это объект, поэтому, как и любой объект в JavaScript, он может содержать пользовательские свойства и методы.

Например, создадим в document.body новое свойство и запишем в него объект:

document.body.myData = < name: 'Пётр', familyName: 'Петрович' >; alert( document.body.myData.name ); // Пётр

как добавить атрибут js

Для добавления атрибута выбранному элементу используется метод setAttribute() . Первым параметром он принимает имя атрибута в виде строки, вторым — значение атрибута, также в виде строки.

// создаем ссылку const link = document.createElement('a'); // добавляем атрибут href link.setAttribute('href', 'https://ru.hexlet.io'); // добавляем атрибут target link.setAttribute('target', '_blank'); // добавляем текст ссылки link.textContent = 'Перейти'; // добавляем ссылку на страницу document.body.append(link); 

В результате мы получим следующий html -код:

 href="https://ru.hexlet.io" target="_blank">Перейти 

Element.setAttribute()

Добавляет новый атрибут или изменяет значение существующего атрибута у выбранного элемента.

Синтаксис

element.setAttribute(name, value);

• name — имя атрибута (строка).
• value — значение атрибута.

Пример

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

button>Hello Worldbutton> 

var b = document.querySelector("button"); b.setAttribute("disabled", "disabled"); 

Примечания

При вызове на элементе внутри HTML документа, setAttribute переведёт имя атрибута в нижний регистр.

Если указанный атрибут уже существует, его значение изменится на новое. Если атрибута ранее не существовало, он будет создан.

Несмотря на то, что метод getAttribute() возвращает null у удалённых атрибутов, вы должны использовать removeAttribute() (en-US) вместо elt.setAttribute(attr, null), чтобы удалить атрибут. Последний заставит значение null быть строкой «null» , которая, вероятно, не то, что вы хотите.

Использование setAttribute() для изменения определённых атрибутов особенно значимо в XUL, так как работает непоследовательно, а атрибут определяет значение по умолчанию. Для того, чтобы получить или изменить текущие значения, вы должны использовать свойства. Например, elt.value вместо elt.setAttribure(‘value’, val).

Чтобы установить атрибут, которому значение не нужно, такой как, например, атрибут autoplay элемента , используйте null или пустое значение. Например: elt.setAttribute(‘autoplay’, »)

Методы DOM имеют дело с атрибутами элементов:

Не знают пространства имён, наиболее часто используемые методы	Вариант, знающий пространство имён (Уровень DOM 2)	Уровень DOM 1 методы для работы с Attr узлами напрямую (используется редко)	Уровень DOM 2 знает о методах пространства имён для работы с Attr узлами напрямую (используется редко)
setAttribute (DOM 1)	setAttributeNS (en-US)	setAttributeNode (en-US)	setAttributeNodeNS (en-US)
getAttribute (DOM 1)	getAttributeNS (en-US)	getAttributeNode (en-US)	getAttributeNodeNS (en-US)
hasAttribute (DOM 2)	hasAttributeNS (en-US)	—	—
removeAttribute (DOM 1)	removeAttributeNS (en-US)	removeAttributeNode (en-US)	—

Спецификации

Specification
DOM Standard # ref-for-dom-element-setattribute①

Совместимость с браузерами

BCD tables only load in the browser

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Метод setAttribute()

Добавить атрибут class со значением «democlass» к элементу «h1»:

document.getElementsByTagName(«H1»)[0].setAttribute(«class», «democlass»);

Перед установкой атрибута:

Привет мир

После установки атрибута:

Привет мир

Дополнительные примеры «Попробуй сам» приведены ниже.

Определение и использование

Метод setAttribute() добавляет указанный атрибут к элементу и присваивает ему указанное значение.

Если указанный атрибут уже существует, устанавливается/изменяется только значение.

Примечание: Хотя с помощью этого метода можно добавить атрибут стиля со значением к элементу, рекомендуется использовать свойства объекта Style вместо для встроенного стиля, потому что это не приведет к перезаписи других свойств CSS, которые могут быть указаны в атрибуте style:

Плохо:

element.setAttribute(«style», «background-color: red;»);

Хорошо:

element.style.backgroundColor = «red»;

Совет: Используйте метод removeAttribute() удаления атрибута из элемента.

Совет: Смотрите также метод setAttributeNode().

Поддержка браузера

Цифры в таблице указывают первую версию браузера, которая полностью поддерживает этот метод.

Метод
setAttribute()	Да	8.0	Да	Да	Да

Синтаксис

element.setAttribute(attributename, attributevalue)

Параметр значений

Параметр	Тип	Описание
attributename	String	Требуемый. Имя атрибута, который вы хотите добавить
attributevalue	String	Требуемый. Значение атрибута, который вы хотите добавить

Технические детали

Вернёт значение	Нет возвращаемого значения
DOM Версия	Базовый уровень 1 Объект элемента

Ещё примеры

Пример

Change an input field to an input button:

document.getElementsByTagName(«INPUT»)[0].setAttribute(«type», «button»);

Перед установкой атрибута:

После установки атрибута:

Пример

Добавьте атрибут href со значением «www.schoolsw3.com&quot ; к элементу :

document.getElementById(«myAnchor»).setAttribute(«href», «https://www.schoolsw3.com»);

Перед установкой атрибута:

Перейти к schoolsw3.com

После установки атрибута: