Element: метод setAttribute()

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

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

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

Синтаксис

setAttribute(name, value)

Параметры

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

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

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

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

Нет (undefined).

Исключения

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

Примеры

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

HTML

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, что приводит к отключению кнопки. В качестве значения для логических атрибутов рекомендуется использовать пустую строку или имя самого атрибута.

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

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

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

BCD tables only load in the browser