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
<button>Привет, мир!</button>
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