Question

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

测试css显示

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

测试可见性

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

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

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

具有可见性的元素：隐藏或不透明度：0被视为可见，   因为他们仍然在布局中消耗空间。

Source

但是，请注意，我无法测试可见性（由用户），因为：

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

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

显示：无需隐藏元素，也不会占用任何空间。该   元素将被隐藏，页面将显示为   元素不存在：

Source

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

所以我的问题是：

上述两个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”属性隐藏会在页面上留下元素，而不会实际显示。因此，当页面呈现显示的其余部分时，将考虑间距。

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

通常根据我的经验测试可见部分是足够的，但是如果你想要更完整，那么是的，你必须检查使用“＆amp;＆amp;”多个属性的条件。这实际上取决于您使用的代码的清洁程度，以及系统其他UI方面的测试结果。

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

Answer 3

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

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

用法：

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

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

3 个答案: