JavaScript метод document.createAttribute()

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

JavaScript метод document.createAttribute() создает новый атрибут с указанным именем (объект Attr) и возвращает его.

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

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

JavaScript синтаксис:

document.createAttribute( name )

name - String

Спецификация

Document Object Model (DOM) Level 1

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

Параметр	Описание
name	Строковое значение, содержащее имя атрибута. Строка, указанная в параметре, преобразуется в нижний регистр.

Исключения

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

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование JavaScript метода document.createAttribute()</title>
	</head>
	<body>
		<button onclick = "myFunc()">Нажми меня</button> <!-- добавляем атрибут событий onclick -->
		<p>Мой элемент</p>
		<script>
	function myFunc() {
	  const elem = document.querySelector( "p" ), // находим первый элемент <p> в документе
	        attr = document.createAttribute( "style" ); // создаем атрибут с именем style

	  attr.value = "color:green";    // задаем значение созданному атрибуту
	  elem.setAttributeNode( attr ); // устанавливаем атрибут элементу <p>
	}
		</script>
	</body>
</html>

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

После этого мы с помощью свойства value задаем значение созданному нами атрибуту и с помощью JavaScript метода Element.setAttributeNode() устанавливаем наш атрибут элементу <p>.

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

Пример использования JavaScript метода document.createAttribute()

JavaScript Document