Как проверить, скрыт ли элемент на странице с помощью jQuery?

Как правильно проверить, скрыт ли элемент в jQuery

Отличный вопрос! Давайте разберемся с этой темой подробно, так как она действительно часто вызывает путаницу у начинающих разработчиков.

Основные способы скрытия элементов в CSS

Прежде чем перейти к jQuery, важно понимать разницу между тремя основными способами скрытия:

• display: none — элемент полностью удаляется из потока документа, он не занимает места на странице
• visibility: hidden — элемент не виден, но продолжает занимать свое место (как "невидимый блок")
• opacity: 0 — элемент полностью прозрачен, но по-прежнему занимает место и может взаимодействовать с мышью (клики)

Стандартные селекторы jQuery: :hidden и :visible

jQuery предоставляет два псевдоселектора для проверки видимости:

// Проверка через :hidden
if ($('#myDiv').is(':hidden')) {
    console.log('Элемент скрыт');
}

// Проверка через :visible
if ($('#myDiv').is(':visible')) {
    console.log('Элемент виден');
}

Важно! Селектор :hidden в jQuery считает элемент скрытым, если:

• У него display: none
• У него width и height равны 0
• Это элемент типа <input type="hidden">

Но он НЕ учитывает visibility: hidden или opacity: 0!

Универсальное решение для всех случаев

Вот функция, которая проверяет все три основных способа скрытия:

function isElementHidden($element) {
    // Проверка display: none
    if ($element.css('display') === 'none') return true;
    
    // Проверка visibility: hidden
    if ($element.css('visibility') === 'hidden') return true;
    
    // Проверка opacity: 0
    if ($element.css('opacity') === '0') return true;
    
    // Проверка нулевых размеров
    if ($element.width() === 0 && $element.height() === 0) return true;
    
    return false;
}

// Использование
if (isElementHidden($('#myDiv'))) {
    console.log('Элемент скрыт одним из способов');
}

Как проверить, скрыт ли родительский элемент

Иногда элемент визуально не виден, потому что его родитель скрыт. Стандартные селекторы jQuery :hidden и :visible учитывают это — они проверяют весь DOM-путь до элемента. Но наша кастомная функция — нет. Вот улучшенная версия:

function isElementEffectivelyHidden($element) {
    // Проверяем сам элемент
    if (isElementHidden($element)) return true;
    
    // Проверяем всех родителей
    return $element.parents().filter(function() {
        return isElementHidden($(this));
    }).length > 0;
}

// Альтернатива с использованием :visible (учитывает родителей)
if ($('#myDiv').is(':visible') === false) {
    console.log('Элемент не виден (включая скрытых родителей)');
}

Практический пример

Допустим, у нас есть такая HTML-структура:

<div id="parent" style="display: none;">
    <div id="child" style="visibility: visible;">
        Я скрыт, потому что родитель скрыт!
    </div>
</div>

Проверки будут работать так:

console.log($('#child').is(':hidden')); // true — jQuery проверяет родителей
console.log($('#child').css('display')); // 'none' — унаследовано от родителя
console.log($('#child').css('visibility')); // 'visible' — не унаследовано!

Рекомендация

Для большинства случаев лучше всего использовать комбинацию:

1. :hidden — для проверки, скрыт ли элемент через display: none (учитывает родителей)
2. Дополнительная проверка visibility и opacity — если вы используете эти свойства для скрытия
3. Кастомную функцию — если вам нужен полный контроль над всеми сценариями

Помните: нет единого "правильного" способа — выбор зависит от того, какие именно методы скрытия вы используете в своем проекте.

function isHidden(element) {
    // Проверка через getComputedStyle
    const styles = window.getComputedStyle(element);
    
    // Основные проверки
    if (styles.display === 'none') return true;
    if (styles.visibility === 'hidden') return true;
    if (styles.opacity === '0') return true;
    
    // Проверка размеров
    const rect = element.getBoundingClientRect();
    if (rect.width === 0 && rect.height === 0) return true;
    
    return false;
}

// Проверка родителей
function isEffectivelyHidden(element) {
    let current = element;
    while (current) {
        if (isHidden(current)) return true;
        current = current.parentElement;
    }
    return false;
}

// Использование
const myElement = document.getElementById('myDiv');
if (isEffectivelyHidden(myElement)) {
    console.log('Элемент скрыт (включая родителей)');
}