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

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

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

Синтаксис

setAttribute(name, value)

Параметры

name

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

value

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

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

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

Возвращаемое значение

Нет (undefined).

Исключения

InvalidCharacterErrorDOMException

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

Примеры

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

HTML

<button>Привет, мир!</button>

button {  height: 30px;  width: 100px;  margin: 1em;}

JavaScript

const button = document.querySelector("button");button.setAttribute("name", "helloButton");button.setAttribute("disabled", "");

Этот пример иллюстрирует два аспекта:

• Первый вызовsetAttribute() изменяет значение атрибутаname на "helloButton". Это можно увидеть с помощью инспектора кода в браузере (Chrome,Edge,Firefox,Safari).
• Используемое значение при установке логического атрибута не важно. Само наличие атрибута означает, что он равенtrue, а отсутствие —false. Таким образом, присваивая значению атрибутаdisabled пустую строку (""), мы переключаемdisabled вtrue, что приводит к отключению кнопки. В качестве значения для логических атрибутов рекомендуется использовать пустую строку или имя самого атрибута.

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

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

Смотрите также

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