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

Основной способ: метод .is(':visible') и .is(':hidden')

В jQuery есть встроенные селекторы :visible и :hidden, которые позволяют проверить видимость элемента. Однако их работа основана на определённых критериях, которые важно понимать.

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

Согласно документации jQuery, элемент считается видимым (:visible), если:

• У него display не равен none
• У него visibility не равен hidden
• Его opacity не равен 0
• Его ширина и высота больше 0
• Он не является элементом <input type="hidden">

Элемент считается скрытым (:hidden), если он не соответствует хотя бы одному из этих условий.

Правильный способ проверки

Лучший и наиболее надёжный способ — использовать метод .is() с селектором :visible или :hidden:

// Проверка, скрыт ли элемент
if ($('#myElement').is(':hidden')) {
    console.log('Элемент скрыт');
} else {
    console.log('Элемент видим');
}

// То же самое, но через :visible (более читаемо)
if ($('#myElement').is(':visible')) {
    console.log('Элемент видим');
} else {
    console.log('Элемент скрыт');
}

Важные нюансы и подводные камни

1. Родительские элементы: Если родитель элемента скрыт через display: none, то и сам элемент считается скрытым, даже если у него нет явного CSS-свойства display: none. jQuery учитывает это.
2. Visibility: hidden: Элемент с visibility: hidden считается скрытым, хотя он занимает место на странице. Это важно помнить.
3. Opacity: 0: Элемент с нулевой прозрачностью также считается скрытым.
4. Нулевые размеры: Если у элемента ширина или высота равна 0 (например, пустой <div>), он считается скрытым.
5. Производительность: Селекторы :visible и :hidden — это не CSS-селекторы, а jQuery-расширения. Они работают медленнее обычных селекторов, поэтому не используйте их в циклах с тысячами элементов.

Пример с разными способами скрытия

<!-- HTML -->
<div id="box1" style="display: none;">Скрыт через display</div>
<div id="box2" style="visibility: hidden;">Скрыт через visibility</div>
<div id="box3" style="opacity: 0;">Скрыт через opacity</div>
<div id="box4">Видимый элемент</div>

<!-- JavaScript -->
<script>
console.log($('#box1').is(':hidden')); // true
console.log($('#box2').is(':hidden')); // true
console.log($('#box3').is(':hidden')); // true
console.log($('#box4').is(':hidden')); // false
</script>

Если нужно проверить только display: none

Иногда требуется узнать, скрыт ли элемент именно через display: none, игнорируя visibility и opacity. В этом случае используйте прямой CSS-метод:

if ($('#myElement').css('display') === 'none') {
    console.log('Элемент скрыт через display: none');
}

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

В 95% случаев достаточно использовать .is(':visible') или .is(':hidden'). Если вам нужно более точное определение (например, видит ли элемент пользователь с учётом прокрутки страницы), придётся писать дополнительную проверку через getBoundingClientRect().

function isHiddenByDisplay(element) {
    return element.offsetParent === null;
}

// Использование
var element = document.getElementById('myElement');
if (isHiddenByDisplay(element)) {
    console.log('Элемент скрыт через display: none');
} else {
    console.log('Элемент видим');
}