javascript - 更健壮的 jQuery :hidden implementation

Question

我正在处理一个奇怪的问题，jQuery 的 .is(':hidden') 为清晰可见内容周围的元素返回 true。查看此fiddle中的问题.

:hidden 伪检查 offsetWidth 和 offsetHeight，在这种情况下实际上报告为 0。

根本原因似乎是错误的标记:DIV 嵌套在 SPAN 中。不幸的是，这个例子是从脚本需要运行的几个大型网站上的标记减少的。没有机会更改标记。

关于如何获得可靠的 :hidden 实现的任何想法，给定现实世界中的标记滥用？这个问题不是关于修复 jQuery，而是关于可靠的可见性检查的逻辑，因为现实世界中的 HTML 经常被破坏。

更新:

根据已接受的答案，添加 getBoundingClientRect 检查将使 .is(':hidden') 在 CSS 未用于彻底改变定位的情况下更加健壮，例如，

function isHiddenSubtree($node) {
  if ($node.is(':hidden')) {
    var rect = $node.get(0).getBoundingClientRect();
    return rect.width === 0 && rect.height === 0;
  } else {
    return false;
  }
}

但是，如 this fiddle 所示，这在 float 或定位元素的情况下会失败。 .

Answer 1

没关系，它是隐藏的:

Element div not allowed as child of element span in this context. (Suppressing further errors from this subtree.)

Span 是行内元素。在 HTML5 解析器 中，您将 block element 设置为 inline element 标记并没有被破坏。但是计算引擎不是HTML5解析器。它适用于正确的标记。

什么是计算引擎？例如，在任何大型站点的开发工具栏中打开 timeline 并获取有关任何 ajax 操作的 computation layers 消息。就是这样，该引擎计算/重新计算 DOM 偏移量和大小。

编辑:

getBoundingClientRect()不返回零大小。 但它是这样工作的:

• 克隆节点到抽象沙箱
• 计算需要应用该节点的所有样式
• 然后申请
• 计算尺寸

所以getBoundingClientRect做了很多不必要的操作。