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

Question

有几种方法可以做到这一点（据我所知）。

测试css显示

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

测试可见性

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

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

如果元素占用了文档中的空间，则认为它们是可见的。 可见元素的宽度或高度大于零。

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

Source

但是，请注意，在这两种情况下，我都无法（由用户）测试可见性，因为：

隐藏元素可以通过将 display 属性设置为 “无”或“隐藏”的可见性属性。但是，请注意 这两种方法产生不同的结果：

可见性： hidden 隐藏一个元素，但它仍然会占用相同的 空间和以前一样。该元素将被隐藏，但仍会影响 布局。

display: none 隐藏元素，不会占用任何空间。这 元素将被隐藏，页面将显示为 元素不存在：

Source

因此，在这两个示例中，我都没有测试该元素是否对用户在所有意义上都是可见的。

所以我的问题是：

• 上面的两个 if 代码有什么区别？
• 测试元素是否对用户可见的最佳方法是：

我应该使用类似的东西吗：

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

Answer 1

两者之间的区别在于，使用“可见”属性隐藏元素会在页面上留下元素，而不是实际显示。因此，当页面呈现显示的其余部分时，将考虑它的间距。

似乎以其他方式执行实际上会阻止将元素放置到页面上，这可能会改变页面上其他元素的布局方式。

根据我的经验，通常测试可见部分就足够了，但是如果您想要更完整，那么是的，您必须在多个属性上使用“&&”条件进行检查。 这实际上完全取决于您使用的代码有多干净，以及系统的其余 UI 方面的测试有多好。

要考虑的另一件事是测试的目的是什么。您是否正在测试您编写的代码，或者浏览器如何使用 Javascript 来呈现页面？您想要测试您正在创建的代码，并依赖于浏览器工作的事实（因为如果浏览器停止工作，那么整个事情无论如何都是不可靠的）。因此，如果您的代码告诉元素设置某个属性，那么检查该属性就是您需要做的所有测试。除此之外的任何事情都只能通过在代码本身之外进行测试来真正得到证明（例如手动查看页面和其他类似的东西）。

Answer 2

如果你想查看一个元素是否存在于 DOM 中，你可以这样做：

$.fn.exists = function () {
    return this.length > 0;
}

用法：

$('#myid').exists();

Answer 3

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

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

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

DEMO