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().

Синтаксис

js
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>

JavaScript

js
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
# ref-for-dom-element-setattribute①

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
setAttribute

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

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