Есть желание присоединиться к интересным IT проектам? Смотри открытые вакансии.

JavaScript метод Element.toggleAttribute()

JavaScript Element

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

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

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

МетодChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
toggleAttribute()69.063.056.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()
Пример использования метода toggleAttribute()
JavaScript Element
×

Кажется, вы используете блокировщик рекламы :(

Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.