检查元素在DOM中是否可见
有没有什么办法可以检查一个元素是否在纯JS（没有jQuery）中可见？
因此，例如，在此页面中：Performance Bikes，如果您将鼠标悬停在交易上（顶部菜单上），会出现一个交易窗口，但在开始时并未显示。 它在HTML中，但不可见。
所以，给定一个DOM元素，我该如何检查它是否可见？ 我试过： window.getComputedStyle(my_element)['display']); 但它似乎并没有工作。 我不知道应该检查哪些属性。 在我看来：
display !== 'none'
visibility !== 'hidden'
任何其他我可能会错过的东西？
根据此MDN文档，元素的offsetParent属性将通过display style属性隐藏，只要它或其父项被隐藏，它将返回null。 只要确保元素不固定。 一个脚本来检查这个，如果你没有'position：fixed' 您网页上的元素可能如下所示：
//Where el is the DOM element you'd like to test for visibility
function isHidden(el) {
return (el.offsetParent === null)
}
另一方面，如果确实有位置固定元素可能会在此搜索中被捕获，那么您会伤心地（并且缓慢地）使用window.getComputedStyle（）。 这种情况下的功能可能是：
//Where el is the DOM element you'd like to test for visibility
function isHidden(el) {
var style = window.getComputedStyle(el);
return (style.display === 'none')
}
选项＃2可能更简单一些，因为它说明了更多的边缘情况，但是我敢打赌，它的处理速度也比较慢，所以如果你不得不多次重复这个操作，最好避免它。
所有其他解决方案为我打破了一些情况..
看到获胜的答案打破在：
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/2377.html