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

Проверить, виден ли элемент на странице, можно несколькими способами. Видимость элемента определяется не только наличием свойства display: none, но и другими факторами, такими как высота и ширина равные нулю, видимость родителей и многое другое.

Варианты проверки видимости элемента:

Проверка с помощью jQuery

В jQuery есть специальный метод .is(':visible'), который проверяет видимость элемента:

if ($('#myElement').is(':visible')) {
    console.log('Элемент виден');
} else {
    console.log('Элемент скрыт');
}

Проверка с помощью чистого JavaScript

Можно воспользоваться чистым JavaScript, проверив несколько свойств элемента:

function isVisible(element) {
    const style = window.getComputedStyle(element);
    return !(style.display === 'none' ||
             style.visibility === 'hidden' ||
             parseFloat(style.opacity) <= 0 ||
             element.offsetWidth === 0 ||
             element.offsetHeight === 0);
}

const el = document.querySelector('#myElement');
if (isVisible(el)) {
    console.log('Элемент виден');
} else {
    console.log('Элемент скрыт');
}

Детали проверок:

window.getComputedStyle(): Получает реальные значения стилей элемента, включая унаследованные.
offsetWidth и offsetHeight: Проверяют, занимает ли элемент пространство на странице.
opacity: Если прозрачность установлена на 0, элемент фактически невидим.

Почему важно учитывать все случаи?

Родители: Если родительский элемент скрыт, дочерние элементы также считаются невидимыми.
Размеры: Если элемент имеет высоту и ширину, равные нулю, он не отображается на странице.
Visibility: Свойство visibility может скрывать элемент без снятия его из DOM.

Чтобы убедиться, что элемент действительно виден на странице, рекомендуется проверять сразу несколько критериев: CSS-свойства, размер элемента и наличие видимости в иерархии DOM. Такой подход гарантирует точность проверки и надёжность результата.