检查元素在DOM中是否可见

2018-06-04 11:24:58

有没有什么办法可以检查一个元素是否在纯JS（没有jQuery）中可见？

因此，例如，在此页面中：Performance Bikes，如果您将鼠标悬停在交易上（顶部菜单上），会出现一个交易窗口，但在开始时并未显示。它在HTML中，但不可见。

所以，给定一个DOM元素，我该如何检查它是否可见？我试过： window.getComputedStyle(my_element)['display']); 但它似乎并没有工作。我不知道应该检查哪些属性。在我看来：

display !== 'none'
visibility !== 'hidden'

任何其他我可能会错过的东西？

所有其他解决方案为我打破了一些情况..

看到获胜的答案打破在：

http://plnkr.co/edit/6CSCA2fe4Gqt4jCBP2wu?p=preview

最终，我决定最好的解决方案是$(elem).is(':visible') - 但是，这不是纯粹的javascript。这是jQuery ..

所以我偷看他们的来源，发现我想要的东西

jQuery.expr.filters.visible = function( elem ) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

这是来源：https：//github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js

这可能有助于：通过将元素置于最靠左的位置来隐藏元素，然后检查offsetLeft属性。如果你想使用jQuery，你可以简单地检查：visible选择器并获取元素的可见性状态。

HTML：

<div id="myDiv">Hello</div>

CSS：

<!-- for javaScript-->
#myDiv{
   position:absolute;
   left : -2000px;
}

<!-- for jQuery -->
#myDiv{
    visibility:hidden;
}

javaScript：

var myStyle = document.getElementById("myDiv").offsetLeft;

if(myStyle < 0){
     alert("Div is hidden!!");
}

jQuery：

if(  $("#MyElement").is(":visible") == true )
{  
     alert("Div is hidden!!");        
}

的jsfiddle

链接地址: http://www.djcxy.com/p/14571.html