JavaScript метод Element.toggleAttribute()

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

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

Метод возвращает true, если атрибут присутствует после вызова, иначе false. Параметр force задаёт желаемое присутствие; недопустимое имя вызывает InvalidCharacterError.

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

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

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

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

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

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

Совместимостьapi.Element.toggleAttribute

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
toggleAttribute	✓69	✓18	✓63	✓56	✓12	✓69	✓63	✓48	✓12	✓10.0	✓69	✓12
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 isPresent = element.toggleAttribute(attributeName);
const isPresentForced = element.toggleAttribute(attributeName, force);

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

DOM Standard.

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

Метод работает с любым именем атрибута, а не только с логическими атрибутами HTML. Новый атрибут получает пустую строку. При force: true уже существующее значение сохраняется. Для задания конкретного значения используйте setAttribute().

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

Переключение атрибутов readonly и disabled

Нажмите ▶, затем Toggle attribute: текстовое поле станет доступным только для чтения, а флажок — неактивным. Повторное нажатие удалит оба атрибута.

index.html

HTML

<button data-migration-click-0="">Toggle attribute</button>
<input type="text" value="Name" />
<input type="checkbox" />

main.js

JavaScript

const toggleAttr = function () {
    const textInput = document.querySelector("input[type='text']")
    const checkboxInput = document.querySelector("input[type='checkbox']")

    textInput.toggleAttribute('readonly')
    checkboxInput.toggleAttribute('disabled')
}

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

В этом примере с использованием метода addEventListener() при нажатии на кнопку (HTML элемент <button>) мы вызываем функцию, которая с помощью метода toggleAttribute() добавляет элементу <input> с типом "text" логический атрибут readonly, а элементу <input> с типом "checkbox" логический атрибут disabled. Обратите внимание на то, что если у элементов уже есть эти логические атрибуты, то в этом случае они будут удалены.