Element: метод setAttribute()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Метод 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