Проверка видимости элемента в DOM

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

<div id="myDiv" style="display: none;">Текст</div>

В чистом JavaScript существует несколько способов проверки видимости элемента.

Первый и наиболее простой способ — проверить значение CSS-свойства display элемента. Если значение display равно none, элемент не отображается на странице.

var elem = document.getElementById('myDiv');
var displayStyle = window.getComputedStyle(elem).display;

if (displayStyle === 'none') {
    // элемент не виден
}

Однако этот подход не учитывает другие возможные причины, по которым элемент может быть невидим. Например, элемент может быть скрыт с помощью CSS-свойства visibility, которое может принимать значение hidden.

var elem = document.getElementById('myDiv');
var visibilityStyle = window.getComputedStyle(elem).visibility;

if (visibilityStyle === 'hidden') {
    // элемент не виден
}

Другой сценарий, когда элемент может быть невидим, — это когда его родительский элемент скрыт. В этом случае, даже если у самого элемента нет стиля, скрывающего его, он все равно не будет виден.

var elem = document.getElementById('myDiv');
var parentDisplayStyle = window.getComputedStyle(elem.parentNode).display;

if (parentDisplayStyle === 'none') {
    // элемент не виден
}

Как видно из этих примеров, проверка видимости элемента DOM может быть сложной задачей, требующей учета различных ситуаций. Однако с помощью чистого JavaScript и некоторых знаний CSS это вполне возможно сделать.