javascript - 如何使用 jQuery 检查不在 DOM 中的元素是否可见

Question

看起来不在 DOM 中的元素被认为是隐藏的，无论应用于这些元素的 CSS 是什么

例如，将以下内容放入 Chrome 控制台中，结果为 false:

$('<div style="display: block;">i am a div</div>').is(":visible")

有什么方法可以检查像上面这样的分离元素是否可见。我不仅仅是想检查 display css 属性是否 block。

Answer 1

这取决于您想要做什么，但最简单的事情是将其附加到检查:

var $div = $("<div>");
$div.appendTo("body").is(":visible");
$div.detach();

如果您无法进行此检查，则可以检查 display 和 visibility CSS，以检查它们是否为 none 和 hidden 分别，并且未设置 hidden 属性。您还可以执行类似 set position:fixed; 的操作top: 100% 并进行上述测试。

编辑:似乎 jQuery 的隐藏检查是:

jQuery.css( elem, "display" ) === "none"
|| !jQuery.contains( elem.ownerDocument, elem )

所以你可以去掉第二行来进行等效的检查。