логотип PurpleSchool
Иконка входа
Вход
логотип PurpleSchool
Главная
База знаний
.hidden в JavaScript

.hidden в JavaScript

17 декабря 2024 г.
Автор

Дмитрий Нечаев

Свойство .hidden в JavaScript предоставляет доступ к атрибуту hidden HTML-элемента, который определяет, должен ли элемент быть видимым или скрытым на странице. Это полезно для динамического управления видимостью элементов в зависимости от определенных условий или действий пользователя. Давайте рассмотрим использование .hidden более подробно с примерами.

Введение в .hidden

Свойство .hidden предоставляет удобный способ управления видимостью HTML-элементов на веб-странице. Когда у элемента установлен атрибут hidden, он скрывается от пользователя и не отображается в браузере. Свойство .hidden в JavaScript позволяет нам читать текущее состояние атрибута hidden элемента или устанавливать его значение.

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

Давайте рассмотрим несколько примеров использования свойства .hidden для управления видимостью элементов на странице.

1. Скрывание элемента

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Пример</title>
</head>
<body>
  <div id="myDiv">Этот элемент будет скрыт</div>

  <button onclick="hideElement()">Скрыть элемент</button>

  <script>
    // Функция для скрытия элемента
    function hideElement() {
      // Получаем ссылку на элемент
      const myDiv = document.getElementById('myDiv');

      // Скрываем элемент
      myDiv.hidden = true;
    }
  </script>
</body>
</html>

В этом примере мы используем свойство .hidden, чтобы скрыть элемент <div> с идентификатором myDiv при нажатии на кнопку.

2. Показ элемента

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Пример</title>
</head>
<body>
  <div id="myDiv" hidden>Этот элемент скрыт по умолчанию</div>

  <button onclick="showElement()">Показать элемент</button>

  <script>
    // Функция для показа элемента
    function showElement() {
      // Получаем ссылку на элемент
      const myDiv = document.getElementById('myDiv');

      // Показываем элемент
      myDiv.hidden = false;
    }
  </script>
</body>
</html>

В этом примере мы используем свойство .hidden, чтобы показать элемент <div> с идентификатором myDiv, который изначально был скрыт атрибутом hidden.

Заключение

Свойство .hidden в JavaScript предоставляет простой и эффективный способ управления видимостью HTML-элементов на веб-странице. Оно позволяет нам динамически скрывать или показывать элементы в зависимости от определенных условий или действий пользователя, что делает веб-интерфейс более интерактивным и удобным для использования. Надеюсь, данная статья помогла вам лучше понять, как использовать свойство .hidden в ваших проектах JavaScript.

Карта развития разработчика

Получите полную карту развития разработчика по всем направлениям: frontend, backend, devops, mobile