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`
|