测试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函数（特别是对于不透明度）。

DEMO

Answer 2

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

似乎以另一种方式执行它实际上会阻止元素被放到页面上，这可以改变页面上其他元素的布局方式。

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

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

Answer 3

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

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

用法：

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