Есть желание присоединиться к интересным IT проектам? Смотри открытые вакансии.

JavaScript метод Element.setAttribute()

JavaScript Element

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

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

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

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

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

МетодChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
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>) вызываем функцию, которая:

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

Пример использования методов hasAttribute(), getAttribute() и setAttribute()
Пример использования методов 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()
Пример использования методов setAttribute() и removeAttribute()
JavaScript Element
×

Кажется, вы используете блокировщик рекламы :(

Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.