测试DOM中元素的最佳方法是什么

Question

有几种方法可以做到这一点(我知道).

测试css显示

if ($('#foo').css('display') == 'none')

测试可见性

if ($('#foo').is(':visible'))

在可见性中,我可以检查元素是否存在.

如果元素占用文档中的空间,则认为元素是可见的.可见元素的宽度或高度大于零.

具有可见性的元素:隐藏或不透明度:0被认为是可见的,因为它们仍然占用布局中的空间.

资源

但是,请注意,我无法测试可见性(由用户),因为:

隐藏元素可以通过将display属性设置为"none"或将visibility属性设置为"hidden"来完成.但请注意,这两种方法会产生不同的结果:

visibility: hidden隐藏了一个元素,但它仍然会占用与之前相同的空间.该元素将被隐藏,但仍会影响布局.

display: none隐藏一个元素,它不会占用任何空间.元素将被隐藏,页面将显示为元素不存在:

资源

因此,在这两个示例中,我都测试元素是否在用户的所有意义上都可见.

所以我的问题是:

• 两个if的代码之间的区别是什么？
• 测试元素是否对用户可见的最佳方法是什么:

我是否应该使用以下内容:

if ($('#foo').is(':visible') && 
    $('#foo').css('opacity') > 0 && 
    $('#foo').css('visibility') != 'hidden')

Answer 1

我认为你最好的选择是实现如下所示的自定义功能，并在新事物出现时进行测试/改进，

$.fn.isReallyVisible = function () { //rename function name as you like..
    return (this.css('display') != 'none' &&
            this.css('visibility') != 'hidden' &&
            this.css('opacity') > 0);
}

上面应该是跨浏览器证明，因为我们使用的是 jQuery.css函数（特别是用于不透明度）。

演示版