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

What's the best way to test an element in the DOM

本文关键字：最佳 方法 是什么 元素 DOM 测试      更新时间：2023-09-26
有

几种方法可以做到这一点(我知道(。

测试 css 显示

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

测试可见性

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

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

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

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

源

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

可以通过将显示属性设置为 "无"或可见性属性为"隐藏"。但是，请注意 这两种方法会产生不同的结果：

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

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

源

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

所以我的问题是：

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

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

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

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

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

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

演示

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

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

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

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

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

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

用法：

$('#myid').exists();
相关文章：