Элемент: метод setAttribute()

Метод setAttribute() интерфейса Element устанавливает значение атрибута указанного элемента. Если атрибут уже существует, его значение обновляется; в противном случае добавляется новый атрибут с указанным именем и значением.

Чтобы получить текущее значение атрибута, используйте getAttribute(); чтобы удалить атрибут, вызовите removeAttribute().

Если вам нужно работать с узлом Attr (например, при клонировании из другого элемента) перед добавлением, можно использовать метод setAttributeNode().

name

Строка, определяющая имя атрибута, значение которого нужно установить. Имя атрибута автоматически преобразуется в нижний регистр при вызове setAttribute() на элементе HTML в документе HTML.

value

Строка, содержащая значение для присваивания атрибуту. Любое значение, отличное от строки, автоматически преобразуется в строку.

Булевы атрибуты считаются true , если они вообще присутствуют на элементе. Вы должны установить value в пустую строку ("") или имя атрибута без начальных и конечных пробелов. См. пример ниже для практического демонстрации.

Поскольку указанное value преобразуется в строку, указание null не обязательно делает то, что вы ожидаете. Вместо удаления атрибута или задания его значения как null, он устанавливает значение атрибута в строку "null". Если вы хотите удалить атрибут, вызовите removeAttribute().

Ничего (undefined).

InvalidCharacterError DOMException

Выбрасывается, если значение name не является допустимым именем XML; например, оно начинается с цифры, тире или точки, или содержит символы, отличные от буквенно-цифровых символов, подчеркиваний, тире или точек.

В следующем примере setAttribute() используется для установки атрибутов на <button>.

const button = document.querySelector("button");

button.setAttribute("name", "helloButton");
button.setAttribute("disabled", "");

Это демонстрирует две вещи:

• Первый вызов setAttribute() выше показывает изменение значения атрибута name на "helloButton". Вы можете увидеть это, используя инспектор страницы вашего браузера (Chrome, Edge, Firefox, Safari).
• Чтобы задать значение булева атрибута, например disabled, можно указать любое значение. Рекомендуются пустая строка или имя атрибута. Важно то, что если атрибут вообще присутствует, независимо от его фактического значения, его значение считается true. Отсутствие атрибута означает, что его значение false. Установив значение атрибута disabled в пустую строку (""), мы устанавливаем disabled на true, что приводит к отключению кнопки.

• Element.hasAttribute()
• Element.getAttribute()
• Element.removeAttribute()
• Element.toggleAttribute()