54 lines
3.2 KiB
Markdown
54 lines
3.2 KiB
Markdown
---
|
||
title: Checking for Hidden Elements
|
||
localeTitle: 检查隐藏的元素
|
||
---
|
||
有时您可能需要检查屏幕上是否有可见或隐藏的元素，以便您可以根据其状态对其执行某些操作。我正在环顾Stack Overflow上的一些解决方案，试图确定一个元素是否可见，并且我对我收到的答案感到不满意。
|
||
|
||
一个答案是使用jQuery库，然后通过使用以下格式检查元素是否具有伪类`:visible` ： `$(element).is(':visible')` 。这适用于使用`display: none;`隐藏的元素`display: none;`在它们上，但它不适用于任何将其`visibility`设置为`hidden`元素。如果父元素是从视图中隐藏的唯一元素，它也不起作用。如果使用`visibility`或`display`隐藏了所测试元素的任何父元素，则正在测试的元素将返回为可见，尽管它在屏幕上不可见。
|
||
|
||
## 解决方案
|
||
|
||
我想出了一个纯JavaScript函数，它解决了这个没有依赖性的问题，并且是一个跨浏览器的解决方案。此函数将首先分析元素，以查看其`display`或`visibility`属性是分别显示为`none`或`hidden` 。然后，如果它们恢复正常，它会检查所有父元素直到文档正文。如果隐藏了正在测试的元素的父元素，则意味着正在测试的元素在文档中不可见。
|
||
|
||
[下面是一个示例CodePen，它演示了这种行为，甚至显示了使用jQuery解决方案和我的纯JavaScript解决方案的比较](http://codepen.io/marcusparsons/pen/bpNqgY) 。请注意，在CodePen中，即使元素在视图中是隐藏的，使用jQuery的`.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` |