JavaScript метод document.createAttribute()

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

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

Преобразование имени в нижний регистр выполняется для HTML-документа. В XML регистр сохраняется.

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

Спецификация: dom.spec.whatwg

✓Поддерживается во всех основных браузерах с 2016 года.

Отдельные значения (1) поддерживаются не везде — смотрите таблицу.

Показать браузеры

ВсеКомпьютерыМобильные

Совместимостьapi.Document.createAttribute

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
createAttribute	✓1	✓12	✓44…	✓≤12.1	✓1	✓18	✓44…	✓≤12.1	✓1	✓1.0	✓4.4	✓1
Emoji and more Unicode in element and attribute names and namespace prefix (valid names match HTML parser)	✓143	✓143	✓149	✓127	×Нет	✓143	✓149	✓94	×Нет	✓30.0	✓143	×Нет

✓поддерживается◐с ограниченияминет поддержки?нет данных≤31 — не позднее версии 31

JavaScript синтаксис

const attribute = document.createAttribute(name);

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

DOM Standard.

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

Исключения

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

Создание атрибута style и добавление его элементу

Нажмите ▶, затем кнопку в результате: созданный узел атрибута style получает значение color:green и добавляется абзацу, поэтому текст становится зелёным.

index.html

HTML

<button data-migration-click-0="">Нажми меня</button>
<p>Мой элемент</p>

main.js

JavaScript

function myFunc() {
    const elem = document.querySelector('p'),
        attr = document.createAttribute('style')

    attr.value = 'color:green'
    elem.setAttributeNode(attr)
}

// Обработчики кнопок перенесены из HTML для запуска с CSP без inline-скриптов.
document.querySelector('[data-migration-click-0]').addEventListener('click', function () {
    myFunc()
})

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

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