.hidden в JavaScript

Главная

База знаний

javascript

Элемент на странице в JavaScript

10 октября 2025

Автор

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

Свойство .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 при нажатии на кнопку.

Свойство .hidden позволяет легко скрывать или отображать элементы на веб-странице. Установка значения true для этого свойства скрывает элемент, а установка значения false отображает его. Это удобный способ для создания интерактивных эффектов и управления видимостью элементов. Если вы хотите детальнее изучить стилизацию с помощью JavaScript и скрытие и отображение элементов, узнайте об управлении видимостью контента — приходите на наш большой курс JavaScript с нуля. На курсе 198 уроков и 30 упражнений, AI-тренажеры для безлимитной практики с кодом и задачами 24/7, решение задач с живым ревью наставника, еженедельные встречи с менторами.

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.

Хотя .hidden является простым способом для управления видимостью элементов, существуют и другие методы, такие как изменение CSS-свойства display или visibility. Выбор оптимального метода зависит от конкретной задачи и требований к анимации и переходам. Чтобы освоить все методы управления видимостью веб-элементов, мы рекомендуем наш курс JavaScript с нуля. В первых 3 модулях уже доступно бесплатное содержание — начните погружаться в мир JavaScript прямо сегодня.