Метод setAttribute() элемента DOM HTML

Определение и использование

setAttribute() Метод добавляет указанное свойство и assigns ему указанное значение.

Если указанное свойство уже существует, то устанавливается или изменяется только значение.

Внимание:Объект HTMLElement документа HTML также определяет JavaScript свойства для всех стандартных HTML свойств. Таким образом, вам нужно использовать этот метод только в том случае, если вы хотите установить нестандартные свойства.

Дополнительная информация:

Референсная книга:

Метод getAttribute()

Метод removeAttribute()

Метод hasAttribute()

Метод hasAttributes()

Метод getAttributeNode()

Метод setAttributeNode()

Метод removeAttributeNode()

Урок:

Свойства HTML

Пример

Пример 1

Добавить класс свойство элемента:

element.setAttribute("class", "democlass");

До добавления:

Объект Element

После добавления:

Объект Element

попробуйте сами

Пример 2

Сделать поле ввода кнопкой:

myInput.setAttribute("type", "button");

попробуйте сами

До изменения:

После изменения:

Пример 3

Добавить атрибут href к элементу <a>:

myAnchor.setAttribute("href", "");

попробуйте сами

До добавления:

Посетите codew3c.com

После добавления:

Посетите codew3c.com

Пример 4

Измените значение атрибута target на "_self":

if (element.hasAttribute("target")) {      
  element.setAttribute("target", "_self");
}

попробуйте сами

синтаксис

element.setAttribute(name, value)

параметр

параметр описание
name обязателен. Название атрибута.
value обязателен. Новое значение атрибута.

возвратное значение

нет.

выбрасывается

исключение описание
INVALID_CHARACTER_ERR параметр name Запрещены символы, которые нельзя использовать в HTML-атрибутах или XML-атрибутах.
NO_MODIFICATION_ALLOWED_ERR Текущий элемент является только для чтения и его атрибуты не могут быть изменены.

Внимание

Элемент может добавить стиль с значением, но不建议 это делать, так как это может затронуть другие атрибуты стиля.

Используйте атрибуты объекта Style:

Минусы:

element.setAttribute("style", "background-color:red;");

Плюсы:

element.style.backgroundColor = "red";

Поддержка браузерами

element.setAttribute() Это функция DOM Level 1 (1998).

Все браузеры поддерживают его полностью:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Поддержка 9-11 Поддержка Поддержка Поддержка Поддержка