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

时间:2013-03-07 20:57:00

标签: javascript jquery html dom visible

看起来DOM中没有的元素被认为是隐藏的,无论应用于这些元素的CSS

例如,将以下内容放入Chrome控制台评估为false

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

有没有办法检查上面的分离元素是否可见。我不只是想检查display css属性是否为block

4 个答案:

答案 0 :(得分:1)

这取决于你想要做什么,但最简单的方法就是附上它来检查:

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

如果此检查对您不利,您可以同时检查displayvisibility CSS,检查它们是否分别为nonehidden未设置hidden属性。您也可以执行类似集position: fixed; top: 100%的操作并执行上述测试。

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

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

所以你可以摆脱那里的第二行做同等的检查。

答案 1 :(得分:1)

Sure you can

var foo = $('<div style="display: block;">i am a div</div>');
foo.appendTo('body');

var vis = foo.is(":visible");

console.log(vis);

foo.detach();

不知道为什么你想尝试这个。

答案 2 :(得分:0)

试试这个:

$('<div style="display: block;">i am a div</div>').css("display")!="none"

答案 3 :(得分:0)

如果某个元素没有附加到DOM,那么浏览器不会将其视为可见,因为简单地说它没有可能影响其可见性的父级