6

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

测试css显示

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

测试可见性

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

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

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

具有 visibility: hidden 或 opacity: 0 的元素被认为是可见的，因为它们仍然占用布局中的空间。

来源

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

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

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

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

来源

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

所以我的问题是：

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

我是否必须使用类似的东西：

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

3 回答 3

2

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

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

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

演示

于 2012-05-14T21:20:21.997 回答
0

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

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

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

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

于 2012-05-14T19:43:21.267 回答
0

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

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

用法：

$('#myid').exists();
于 2012-05-14T20:27:58.857 回答