我正在处理一个奇怪的问题,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 或定位元素的情况下会失败。 .
最佳答案
没关系,它是隐藏的:
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
做了很多不必要的操作。
关于javascript - 更健壮的 jQuery :hidden implementation,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21526208/