有什么方法可以让我在纯JS中检查一个元素是否可见(没有jQuery)?
因此,例如,在这个页面。Performance Bikes,如果你把鼠标悬停在Deals(顶部菜单)上,就会出现一个交易窗口,但在开始时它并没有显示。它在HTML中,但它是不可见的。
那么,给定一个DOM元素,我怎样才能检查它是否可见?我试过了。
window.getComputedStyle(my_element)['display']);
但似乎并不奏效。 我想知道我应该检查哪些属性。我想到了。
display !== 'none'
visibility !== 'hidden'
还有没有其他我可能遗漏的?
根据MDN文档,一个元素的offsetParent
属性将返回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可能更直接一些,因为它考虑到了更多的边缘情况,但我敢说它的速度也很慢,所以如果你必须多次重复这个操作,最好还是避免它。
这可能有帮助: 通过将该元素定位在最左边的位置来隐藏它,然后检查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!!");
}
如果我们只是收集检测能见度的基本方法,让我不要忘记。
opacity > 0.01; // probably more like .1 to actually be visible, but YMMV
而至于如何获得属性。
element.getAttribute(attributename);
因此,在你的例子中。
document.getElementById('snDealsPanel').getAttribute('visibility');
但什么?它在这里不起作用。仔细观察,你会发现可见性不是作为元素的一个属性被更新,而是使用style
属性。这是试图做你正在做的事情的许多问题之一。其中包括:你不能保证一个元素中真的有东西可看,只是因为它的可见性、显示性和不透明度都有正确的值。它仍然可能缺乏内容,或者它可能缺乏高度和宽度。另一个对象可能掩盖了它。关于更多的细节,在谷歌上快速搜索发现了this,甚至包括一个库来尝试解决这个问题。(YMMV)
看看下面的内容,它们可能是这个问题的重复,有很好的答案,包括来自强大的John Resig的一些见解。然而,你的具体用例与标准用例略有不同,所以我就不做标记了。
(编辑:op说他在搜刮网页,而不是创建网页,所以下面的内容不适用) 一个更好的选择?将元素的可见性与模型属性绑定,并始终使可见性取决于该模型,就像Angular使用ng-show那样。你可以使用任何你想要的工具来做到这一点。Angular、普通JS,等等。更好的是,你可以随着时间的推移改变DOM的实现,但你总是能够从模型中读取状态,而不是从DOM中。从DOM中读取你的真相是不好的。而且很慢。更好的做法是检查模型,并相信你的实现能够确保DOM状态反映模型。(并使用自动化测试来确认这个假设)。