Метод setAttribute() HTML DOM
❮ Элемент объектаПример
Добавьте атрибут class со значением «democlass» в элемент <h1>:
document.getElementsByTagName("H1")[0].setAttribute("class", "democlass");
Перед установкой атрибута:
Hello World
После установки атрибута:
Hello World
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Метод setAttribute() добавляет указанный атрибут к элементу и присваивает ему указанное значение.
Если указанный атрибут уже существует, устанавливается/изменяется только значение.
Примечание. Хотя с помощью этого метода можно добавить к элементу атрибут стиля со значением, рекомендуется вместо встроенного стиля использовать свойства объекта Style , поскольку это не приведет к перезаписи других свойств CSS, которые могут быть указаны в атрибут стиля:
Плохой:
element.setAttribute("style", "background-color: red;");
Хорошо:
element.style.backgroundColor = "red";
Совет: используйте метод removeAttribute() , чтобы удалить атрибут из элемента.
Совет: См. также метод setAttributeNode() .
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, полностью поддерживающую метод.
Method | |||||
---|---|---|---|---|---|
setAttribute() | Yes | 8.0 | Yes | Yes | Yes |
Синтаксис
element.setAttribute(attributename, attributevalue)
Значения параметров
Parameter | Type | Description |
---|---|---|
attributename | String | Required. The name of the attribute you want to add |
attributevalue | String | Required. The value of the attribute you want to add |
Технические детали
Возвращаемое значение: | Нет возвращаемого значения |
---|---|
DOM-версия | Объект элемента основного уровня 1 |
Дополнительные примеры
Пример
Измените поле ввода на кнопку ввода:
document.getElementsByTagName("INPUT")[0].setAttribute("type", "button");
Перед установкой атрибута:
После установки атрибута:
Пример
Добавьте атрибут href со значением «www.w3schools.com» в элемент <a>:
document.getElementById("myAnchor").setAttribute("href", "https://www.w3schools.com");
Перед установкой атрибута:
После установки атрибута:
Пример
Узнайте, имеет ли элемент <a> целевой атрибут. Если это так, измените значение целевого атрибута на «_self»:
// Get the <a> element with id="myAnchor"
var x = document.getElementById("myAnchor");
// If the <a> element has a target attribute, set the value to "_self"
if (x.hasAttribute("target")) {
x.setAttribute("target", "_self");
}
Связанные страницы
Учебник по HTML: HTML-атрибуты
Справочник по HTML DOM: метод getAttribute()
Справочник по HTML DOM: метод hasAttribute()
Справочник по HTML DOM: метод removeAttribute()
❮ Элемент объекта