Метод setAttribute()
Пример
Добавить атрибут class со значением "democlass" к элементу "h1":
document.getElementsByTagName("H1")[0].setAttribute("class", "democlass");
Перед установкой атрибута:
Привет мир
После установки атрибута:
Привет мир
Попробуйте сами »
Дополнительные примеры "Попробуй сам" приведены ниже.
Определение и использование
Метод setAttribute() добавляет указанный атрибут к элементу и присваивает ему указанное значение.
Если указанный атрибут уже существует, устанавливается/изменяется только значение.
Примечание: Хотя с помощью этого метода можно добавить атрибут стиля со значением к элементу, рекомендуется использовать свойства объекта Style вместо для встроенного стиля, потому что это не приведет к перезаписи других свойств CSS, которые могут быть указаны в атрибуте style:
Плохо:
element.setAttribute("style", "background-color: red;");
Хорошо:
element.style.backgroundColor = "red";
Совет: Используйте метод removeAttribute() удаления атрибута из элемента.
Совет: Смотрите также метод setAttributeNode().
Поддержка браузера
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает этот метод.
Метод | |||||
---|---|---|---|---|---|
setAttribute() | Да | 8.0 | Да | Да | Да |
Синтаксис
element.setAttribute(attributename, attributevalue)
Параметр значений
Параметр | Тип | Описание |
---|---|---|
attributename | String | Требуемый. Имя атрибута, который вы хотите добавить |
attributevalue | String | Требуемый. Значение атрибута, который вы хотите добавить |
Технические детали
Вернёт значение | Нет возвращаемого значения |
---|---|
DOM Версия | Базовый уровень 1 Объект элемента |
Ещё примеры
Пример
Change an input field to an input button:
document.getElementsByTagName("INPUT")[0].setAttribute("type", "button");
Перед установкой атрибута:
После установки атрибута:
Пример
Добавьте атрибут href со значением "www.schoolsw3.com" ; к элементу <a>:
document.getElementById("myAnchor").setAttribute("href", "https://www.schoolsw3.com");
Перед установкой атрибута:
После установки атрибута:
Попробуйте сами »Пример
Узнать, имеет ли элемент <a> целевой атрибут. Если это так, измените значение целевого атрибута на "_self":
// Получите элемент <a> с id="myAnchor"
var x = document.getElementById("myAnchor");
// Если элемент <a> имеет целевой атрибут, установите значение равным "_self"
if (x.hasAttribute("target")) {
x.setAttribute("target", "_self");
}
Попробуйте сами »
Связанные страницы
HTML Учебник: HTML Атрибуты
HTML DOM Справочник: getAttribute() Метод
HTML DOM Справочник: hasAttribute() Метод
HTML DOM Справочник: removeAttribute() Метод