JavaScript метод Element.removeAttribute()

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

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

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

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

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

Показать браузеры
Совместимостьapi.Element.removeAttribute
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
removeAttribute✓1✓12

Версия 12 выпущена в 2015 г.

Примечание MDN (англ.)

This function doesn't respect boolean attributes' default values. See bug 12087679.

✓1✓8✓1✓18✓4✓10.1✓1✓1.0✓4.4✓1

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

JavaScript синтаксис

JavaScript
element.removeAttribute(attributeName);

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

DOM Standard.

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

Параметры Element.removeAttribute()
Параметр Описание
attributeName Имя атрибута, который вы хотите удалить из элемента. Если указанный атрибут не существует, метод removeAttribute() не создает ошибки. Обязательный параметр.

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

Добавление и удаление атрибута style

Нажмите ▶, затем Set attribute: текст абзаца станет красным. Remove attribute удалит атрибут style, и цвет вернётся к исходному.

index.html
HTML
<button data-migration-click-0="">Set attribute</button>
<button data-migration-click-2="">Remove attribute</button>
<p>Съешь ещё этих мягких французских булок, да выпей же чаю.</p>
main.js
JavaScript
const p = document.querySelector('p')

const setAttr = function () {
    p.setAttribute('style', 'color:red')
}
const removeAttr = function () {
    p.removeAttribute('style')
}

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

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

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