---
title: Checking for Hidden Elements
localeTitle: Проверка скрытых элементов
---
Бывают моменты, когда вам может потребоваться проверить, является ли элемент видимым или скрытым на экране, чтобы вы могли выполнить какое-либо действие по нему, учитывая его состояние. Я искал некоторые решения в Stack Overflow, пытаясь выяснить, был ли элемент видимым, и я не был удовлетворен полученными ответами.
Один из ответов заключался в том, чтобы использовать библиотеку jQuery, а затем проверить, есть ли у элемента псевдослот `:visible` с использованием этого формата: `$(element).is(':visible')` . Это работает для элементов, которые скрыты с помощью `display: none;` на них, но он не работает ни на каком элементе, который имеет `visibility` для `hidden` . Он также не работает, если родительский элемент является единственным элементом, который скрыт от представления. Если какой-либо родительский элемент тестируемого элемента скрыт, используя `visibility` или `display` , проверяемый элемент будет отображаться как видимый, несмотря на то, что он не отображается на экране.
## Решение
Я придумал чистую функцию JavaScript, которая решает эту проблему, которая не имеет зависимостей, и является решением, совместимым с кросс-браузером. Эта функция сначала проанализирует элемент, чтобы увидеть, `display` ли его свойства `display` или `visibility` как `none` или `hidden` соответственно. Затем, если они возвращаются в нормальное состояние, он проверяет все родительские элементы на тело документа. Если родительский элемент тестируемого элемента скрыт, это означает, что проверяемый элемент не отображается в документе.
[Вот пример CodePen, который демонстрирует это поведение и даже показывает, что сравнение использует решение jQuery и мое чистое решение для JavaScript](http://codepen.io/marcusparsons/pen/bpNqgY) . Обратите внимание, что в CodePen, хотя элемент скрытно скрыт от вида, использование jQuery's `.is(':visible')` не является жизнеспособным вариантом для действительно проверки любого элемента видимости.
И вот функция, которую я создал:
```
function isVisible (element) {
//start with initial element to check visibility and display
var el = document.querySelector(element);
//display and visibility vary per browser and must be sought in different ways depending on the browser
var t1 = el.currentStyle ? el.currentStyle.visibility : getComputedStyle(el, null).visibility;
var t2 = el.currentStyle ? el.currentStyle.display : getComputedStyle(el, null).display;
//if either of these are true, then the element is not visible
if (t1 === "hidden" || t2 === "none") {
return false;
}
//This regex is used to scan the parent nodes all the way up to the body element
while (!(/body/i).test(el)) {
//get the next parent node
el = el.parentNode;
//grab the values, if available,
t1 = el.currentStyle ? el.currentStyle.visibility : getComputedStyle(el, null).visibility;
t2 = el.currentStyle ? el.currentStyle.display : getComputedStyle(el, null).display;
if (t1 === "hidden" || t2 === "none") {
return false;
}
}
//if all scans are not successful, then the element is visible
return true;
}
```
И чтобы использовать эту функцию, вам нужно только вызвать ее с помощью строки запроса, чтобы выбрать элемент для проверки, т. Е.
```
My paragraph
```
И получившееся предупреждение будет: `Is my paragraph visible? false`