freeCodeCamp

3.2 KiB

Raw Blame History

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

3.2 KiB Raw Blame History Unescape Escape

解决方案

3.2 KiB

Raw Blame History