Переключение видимости элемента jQuery: функция toggleTestElement()

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

Для проверки отображается ли элемент на веб-странице, воспользуйтесь функцией $(элемент).is(':visible') из библиотеки jQuery. Данный метод проверяет, занимает ли элемент пространство на странице и не проводит анализ его видимости исходя из стилей opacity и visibility.

let isVisible = $('#element').is(':visible'); // Видим ли элемент? Вот в чём вопрос.

Если метод возвращает true, элемент отображается; false указывает на то, что элемент скрыт, установлено свойство display: none, либо он находится внутри скрытого родительского элемента.

Обеспечение производительности при проверке отображаемости

Селекторы :visible и :hidden могут показаться незначительными, но они могут существенно замедлить выполнение скриптов из-за пересчёта стилей и макета страницы. Это особенно критично для сайтов с большим количеством элементов в DOM.

• Используйте данные селекторы с умом и кешируйте результаты, если они используются в циклах или повторно.
• Применяйте инструменты для оценки производительности (например, Chrome DevTools), чтобы убедиться, что селектор :visible не ухудшает отклик сайта.
• В jQuery 3 производительность данных проверок была улучшена, но стоит помнить о возможных проблемах с производительностью.

Переключение отображаемости элемента как трюк иллюзиониста

Когда требуется изменить отображаемость элемента, будто это магическое умение иллюзиониста, отлично подойдёт метод .fadeToggle(). Он позволяет плавно показать или скрыть элемент с эффектом постепенного исчезновения.

$('#toggleButton').on('click', function() {
    $('#elementToToggle').fadeToggle(); // Сначала видим, потом нет – вот и весь трюк!
});

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

Остерегайтесь плаща-невидимки

Невидимым считается элемент, стиль display которого либо его родительских элементов установлен в значение none. Поэтому когда вы используете $(элемент).is(':visible'), важно учесть этот момент:

$('#childElement').is(':visible'); 
// Вернёт false, если у дочернего элемента или у его родителя стиль установлен в none

Если ситуация не однозначна, и родительские элементы могут быть скрыты или обнаружены независимо, используйте .parents() или .closest(selector), чтобы проверить отображаемость каждого родительского элемента.

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

Представьте веб-страницу как сцену, а элементы на ней – как актёров:

🎭 Сцена (Область просмотра)
👀 Зрители (Пользователи)
🎩 Актёр (Элемент)

Находится ли наш актёр в центре событий?

$('#actor').is(':visible'); // Заметен ли актёр зрителями или он укрылся?

👀 Если зрители могут заметить актёра, значит, спектакль идёт!

👀: Вижу ли я актёра?
🎭: Да, он в центре внимания!
// Актёр замечен (элемент отображается)

👀: А сейчас?
🎭: Нет, он скрылся за кулисами!
// Актёра не видно (элемент скрыт)

Именно так с помощью jQuery мы определяем, находится ли элемент в поле нашего внимания!

Разнообразные методы проверки отображаемости

Помимо .is(':visible') существуют и другие методы для определения отображаемости элемента:

Использование getBoundingClientRect()

Этот встроенный в JavaScript метод позволяет определить, находится ли элемент в пределах видимой области экрана.

function isInViewport(element) {
    const rect = element.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}

// Проверка элемента
isInViewport(document.getElementById('element')); 
// Возвращает true или false в зависимости от его расположения

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

Анализ конкретных CSS свойств

Иногда требуется узнать, используют ли свойства display или visibility у элемента определённые значения.

let isDisplayNone = $('#element').css('display') === 'none'; // Скрыт ли элемент?
let isVisibilityHidden = $('#element').css('visibility') === 'hidden'; // Или просто невидим?

Эти способы дают прямой и чёткий результат без использования селекторов :visible и :hidden.

Переключение классов для управления отображаемостью

Распространённый подход – управление отображаемостью элементов с помощью CSS-классов.

// CSS
.hidden-class { display: none; } // Скрыть элемент
.visible-class { display: block; } // Показать элемент

// JS
$('#element').toggleClass('hidden-class visible-class'); // Переключаем классы для управления отображаемостью

Такой подход позволяет CSS контролировать отображаемость, что положительно влияет на производительность и облегчает управление стилями.

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

1. :visible Selector | Документация по jQuery API — официальная документация по селектору :visible в библиотеке jQuery.
2. Check if element is visible in DOM – Stack Overflow — решения и обсуждения о том, как определить, отображается ли элемент в DOM.
3. visibility | CSS-Tricks — глубокий анализ свойства CSS visibility и его влияния на отображаемость.
4. Element: getBoundingClientRect() method – Web APIs | MDN — подробная информация об использовании метода getBoundingClientRect для определения позиции элемента и его отображаемости.
5. .is() | Документация по jQuery API — руководство по использованию метода .is() в jQuery для проверки свойств элементов, включая их отображаемость.
6. jQuery Effects – Hide and Show | W3Schools — обучающие материалы по изменению отображаемости элементов, используя эффекты скрытия и отображения в jQuery.