JavaScript метод Element.toggleAttribute()

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

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

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

Метод	Chrome	Firefox	Opera	Safari	IExplorer	Edge
`toggleAttribute()`	69.0	63.0	56.0	?	?	18.0

JavaScript синтаксис:

element.toggleAttribute( attributeName );
element.toggleAttribute( attributeName, force );

attributeName - String
force - Boolean

Версия JavaScript

Document Object Model (DOM)

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

Параметр	Описание
attributeName	Имя атрибута, который Вы хотите добавить элементу, если его нет, или удалить его, если он присутствует у данного элемента. Обязательный параметр.
force	Логическое значение, определяющее, должен ли атрибут быть добавлен или удален, независимо от того, присутствует атрибут или нет в данный момент. Необязательный параметр.

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование метода и toggleAttribute()</title>
	</head>
	<body>
		<button onclick = "toggleAttr()">Toggle attribute</button> <!-- добавляем атрибут событий onclick -->
		<input type = "text" value = "Name">
		<input type = "checkbox">

		<script>
	function toggleAttr() {
  	  const textInput = document.querySelector("input[type='text']"); // находим первый элемент в документе с определенным значением атрибута
  	  const checkboxInput = document.querySelector("input[type='checkbox']"); // находим первый элемент в документе с определенным значением атрибута

  	  textInput.toggleAttribute("readonly"); // добавляем элементу логический атрибут, если его нет, или удаляем его, если он присутствует у данного элемента
  	  checkboxInput.toggleAttribute("disabled"); // добавляем элементу логический атрибут, если его нет, или удаляем его, если он присутствует у данного элемента
	}
		</script>
	</body>
</html>

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

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

Пример использования метода toggleAttribute()

JavaScript Element