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