Переключение между div элементами в JavaScript: решение ошибки

Быстрый ответ

Для изменения видимости div-элемента воспользуйтесь свойством style.display в JavaScript следующим образом:

function toggleDiv() {
  let x = document.getElementById('myDiv');
  x.style.display = x.style.display === 'none' ? 'block' : 'none';
  // Мы "играем" в прятки с элементом myDiv!
}

Привязка данной функции к кнопке в разметке HTML:

<button onclick="toggleDiv()">Переключить Div</button>
<div id="myDiv">Это содержимое может быть скрыто!</div>

Функция toggleDiv() переключает видимость div-элемента.

Расширение функциональности и утончённые трюки

Работа с различными значениями свойства display

Метод getComputedStyle применим к элементам со значениями свойства display, отличными от 'none' или 'block':

function toggleDiv() {
  let x = document.getElementById('myDiv');
  let style = window.getComputedStyle(x);
  x.style.display = style.display === 'none' ? '' : 'none';
  /* Мы ведём игру в прятки на профессиональном уровне! */
}

Таким образом, элемент возвращает свой первоначальный стиль из CSS-таблицы стилей, если он не 'none'.

Подробнее об этом расскажет наш спикер на видео

Доверим управление CSS

Для возвращения элементу его исходного стилевого оформления, достаточно просто удалить свойство style.display:

x.style.display = '';

Делегирование управления CSS способствует лучшей адаптации при респонсивном дизайне.

Пользовательское display для большей гибкости

Для увеличения гибкости передавайте желаемое значение display в качестве аргумента:

function showDiv(displayValue = 'block') {
  let x = document.getElementById('myDiv');
  x.style.display = displayValue;
  /* Мы полностью контролируем ситуацию! */
}

Переключение стилей при помощи CSS-классов

Можно использовать классы для изменения видимости:

.hidden { display: none; }
.visible { display: block; } /* Вот я! */

Просто переключайте эти классы в JavaScript для элегантного внешнего вида:

function toggleDiv() {
  let x = document.getElementById('myDiv');
  x.classList.toggle('hidden');
  /* Сейчас я здесь, а вот и нет меня! */
}

Стилевое оформление превосходит ограничивающий синтаксис!

Поклонники клавиатуры, вперёд!

Предпочтительно использовать Event Listeners, вместо встроенных обработчиков событий onclick для более аккуратного HTML:

document.getElementById('toggleButton').addEventListener('click', toggleDiv);
/* Я всегда на связи! */

Завершим обсуждение с помощью jQuery

Небольшое использование jQuery может значительно упростить процесс:

$('#toggleButton').click(function() {
  $('#myDiv').toggle();
  /* Игра в прятки достигла нового уровня! */
});

Визуализация

Выключатель (💡🔄) и картина (🖼️) на стене в нашем представлении:

Выключатель: 💡🔄
Картина:     🖼️
Стена:       🧱
Видимость:   🔍

Включаем выключатель (showDiv()):

💡🔄➡️🔛 Видимость: 🔍 (Картина перед нами)

Отключаем выключатель (hideDiv()):

💡🔄➡️🔇 Видимость: ❌ (Картина спрятана)

Также, как выключатель управляет видимостью картины, наши функции JavaScript позволяют нам управлять видимостью элементов!

function toggleDiv() {
  let x = document.getElementById('myDiv');
  x.style.display = x.style.display === 'none' ? 'block' : 'none';
  // 🔛 Картина: 'Я здесь!'
  // 🔇 Картина: 'Я спрятался!'
}

Проблемы и решения

Обращение с нестандартными значениями display

Когда div использует значения display, такие как 'flex' или 'grid', настройте функцию переключения следующим образом:

function toggleDiv() {
  let x = document.getElementById('myDiv');
  let currentDisplay = getComputedStyle(x).display;
  x.style.display = currentDisplay !== 'none' ? 'none' : x.dataset.originalDisplay || 'block';
  /* Мы уважаем индивидуальность каждого div-элемента! */
}

Не забывайте сохранять исходное значение display в data-атрибутах для сохранения целостности:

<div id="myDiv" data-original-display="flex">Гибкий контент</div>

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

Используйте CSS-переходы или JavaScript-анимации для более плавного и эстетически приятного переключения состояний элементов.

Множество элементов? Это не проблема!

Убедитесь, что ваша функция-переключатель корректно работает с каждым div-элементом, если на странице их несколько. Используйте уникальные идентификаторы и точные селекторы:

function toggleDiv(divId) {
  let x = document.getElementById(divId);
  // Переключаем видимость
}

Полезные материалы

1. Как переключаться между скрытием и отображением элемента — руководство по переключению видимости элементов с помощью JavaScript.
2. Введение в DOM – Web API | MDN — вступительный материал для понимания Document Object Model (DOM).
3. Основы для начинающих: Как работают CSS-селекторы | CSS-Tricks — доступное объяснение работы CSS-селекторов для стилизации элементов.
4. JavaScript – Google Maps API v3 – Наложение изображения на всю карту (под маркером) – Stack Overflow — обсуждение вопросов видимости элементов в веб-приложениях в сообществе Stack Overflow.
5. Изменение документа — обучающий материал по динамическому изменению содержимого и стилей веб-страниц с помощью JavaScript.
6. .toggle() | JQuery API Документация — описание функции toggle в jQuery для управления видимостью элементов.
7. Document Object Model :: Элоквентный JavaScript — глава из книги "Элоквентный JavaScript", посвящённая теме DOM.