54 lines
5.1 KiB
Markdown
54 lines
5.1 KiB
Markdown
|
---
|
|||
|
|
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;
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
И чтобы использовать эту функцию, вам нужно только вызвать ее с помощью строки запроса, чтобы выбрать элемент для проверки, т. Е.
|
|||
|
|
```
|
|||
|
|
<body>
|
|||
|
|
<p style="visibility: hidden;" id="myP">My paragraph</p>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
//include isVisible function
|
|||
|
|
alert('Is my paragraph visible? ' + isVisible('#myP'));
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
И получившееся предупреждение будет: `Is my paragraph visible? false`
|