JavaScript метод Element.setAttribute()

Определение и применение

JavaScript метод setAttribute() объекта Element позволяет добавить новый атрибут, или значение атрибута с указанным именем текущему элементу.

Обращаю Ваше внимание, что булевы атрибуты считаются истинными, если они вообще присутствуют на элементе, независимо от их фактического значения. Для корректной работы метода setAttribute(), вы должны указать пустую строку ("") в значении (второй аругемент метода) для создания подобных атрибутов.

Для того, чтобы удалить из элемента атрибут с указанным именем, воспользуйтесь методом JavaScript removeAttribute() объекта Element. Пример вы може найти внизу страницы.

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

Метод	Chrome	Firefox	Opera	Safari	IExplorer	Edge
`setAttribute()`	Да	Да	Да	Да	Да	Да

JavaScript синтаксис:

const attributeVal = element.setAttribute( attributeName, value );

attributeName, value - String

Версия JavaScript

Document Object Model (DOM) Level 1 Core

Значения параметров

Параметр	Описание
attributeName	Имя атрибута, значение которого вы хотите изменить, или новый атрибут с указанным значением. Обязательный параметр.
value	Значение, которое будет присвоено атрибуту. Любое указанное не строковое значение автоматически преобразуется в строку. Обязательный параметр.

Исключения

Тип исключения	Описание
INVALID_CHARACTER_ERR	Возникает в том случае, если указанное имя атрибута содержит один или несколько символов, которые недопустимы в именах атрибутов.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Использование методов hasAttribute(), getAttribute() и setAttribute()</title>
	</head>
	<body>
		<button onclick = "checkAttr()">Click me</button> <!-- добавляем атрибут событий onclick -->
		<p data-val = "1"></p>
		<script>
	function checkAttr() {
	  const p = document.querySelector("p"), // выбираем первый элемент <p> в документе
	        attr = "data-val"; // инициализируем переменную строковым значением
    
	  if ( p.hasAttribute(attr) ) { // проверяем имеется ли у элемента атрибут со значением, содержащимся в переменной attr
	    const attrVal = p.getAttribute(attr); // получаем значение этого атрибута
	    p.innerHTML = attrVal; // добавляем элементу <p> новое содержимое (значение атрибута data-val )
    
	    const newAttrVal = Number(attrVal) + 1; // инициализируем переменную, которая увеличивает значение атрибута data-val на 1
	    p.setAttribute(attr, newAttrVal); // устанавливаем новое значение для атрибута data-val
	  }  
	}
		</script>
	</body>
</html>

В этом примере с использованием атрибута событий onclick при нажатии на кнопку (HTML элемент <button>) вызываем функцию, которая:

Инициализирует две переменные, первая переменная содержит первый элемент <p> в документе, а вторая строковое значение (одноименное с атрибутом элемента <p>).
С помощью метода hasAttribute() проверяем имеется ли у элемента <p> атрибут со значением, содержащимся в переменной attr.
С помощью метода getAttribute() получаем значение этого атрибута и с помощью свойства innerHTML добавляем элементу <p> новое содержимое (значение атрибута data-val).
После этого инициализируем переменную, которая увеличивает значение атрибута data-val на 1, и с помощью метода setAttribute() устанавливаем новое значение для атрибута data-val элементу <p>. Обратите внимание, что перед увеличением на единицу мы приводим строковое значение, содержащееся в переменной к числу, используя конструктор Number().

Результат нашего примера:

Пример использования методов hasAttribute(), getAttribute() и setAttribute()

В следующем примере мы рассмотрим с Вами как произвести удаление конкретного атрибута у элемента с использованием метода removeAttribute():

<!DOCTYPE html>
<html>
	<head>
		<title>Использование методов setAttribute() и removeAttribute()</title>
	</head>
	<body>
		<button onclick = "setAttr()">Set attribute</button> <!-- добавляем атрибут событий onclick -->
		<button onclick = "removeAttr()">Remove attribute</button> <!-- добавляем атрибут событий onclick -->
		<p>Съешь ещё этих мягких французских булок, да выпей же чаю.</p>

		<script>
	const p = document.querySelector("p"), // выбираем первый элемент <p> в документе 
	function setAttr() {
	  p.setAttribute("style", "color:red"); // устанавливаем значение атрибута style у элемента
	}
	function removeAttr() {
	  p.removeAttribute("style"); // удаляем атрибут style у элемента
	}
		</script>
	</body>
</html>

В этом примере с использованием атрибута событий onclick при нажатии на первую кнопку (HTML элемент <button>) мы вызываем функцию, которая с помощью метода setAttribute() устанавливаем значение глобального атрибута style у элемента <p>, который мы предварительно выбрали с использованием метода querySelector().

При нажатии на вторую кнопку мы вызываем функцию, которая с помощью метода removeAttribute() удаляет атрибут style у элемента <p>.

Результат нашего примера:

Пример использования методов setAttribute() и removeAttribute()

JavaScript Element