因为 Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout (如jQuery :visible Selector所述) - 我们可以通过这种方式检查元素是否真的可见:
function isElementReallyHidden (el) {
return $(el).is(":hidden") || $(el).css("visibility") == "hidden" || $(el).css('opacity') == 0;
}
var booElementReallyShowed = !isElementReallyHidden(someEl);
$(someEl).parents().each(function () {
if (isElementReallyHidden(this)) {
booElementReallyShowed = false;
}
});
186
您也可以使用纯JavaScript执行此操作:
function isRendered(domObj) {
if ((domObj.nodeType != 1) || (domObj == document.body)) {
return true;
}
if (domObj.currentStyle && domObj.currentStyle["display"] != "none" && domObj.currentStyle["visibility"] != "hidden") {
return isRendered(domObj.parentNode);
} else if (window.getComputedStyle) {
var cs = document.defaultView.getComputedStyle(domObj, null);
if (cs.getPropertyValue("display") != "none" && cs.getPropertyValue("visibility") != "hidden") {
return isRendered(domObj.parentNode);
}
}
return false;
}
笔记:
无处不在
适用于嵌套元素
适用于CSS和内联样式
不需要框架
180
由于问题涉及单个元素,因此该代码可能更合适:
// Checks css for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible");
// The same works with hidden
$(element).is(":hidden");
30 回答
可以简单地使用
hidden
或visible
属性,例如:或者你可以简化相同的如下 .
只需通过检查布尔值来检查可见性,例如:
我为每个函数使用了这个代码 . 否则,您可以使用
is(':visible')
来检查元素的可见性 .但是如果元素的CSS如下所示呢?
所以this answer to Stack Overflow question How to check if an element is off-screen也应该考虑 .
您可以使用hidden选择器:
和visible选择器:
Source:
Blogger Plug n Play - jQuery Tools and Widgets: How to See if Element is hidden or Visible Using jQuery
jsFiddle:
JSFiddle - ipsjolly - k4WWj
这可能有效:
来自How do I determine the state of a toggled element?
您可以使用
:visible
和:hidden
选择器确定元素是否已折叠 .如果您只是根据其可见性对元素进行操作,则可以在选择器表达式中包含
:visible
或:hidden
. 例如:这里还有一个三元条件表达式来检查元素的状态,然后切换它:
在jQuery中针对
:hidden
选择器测试元素时,应该将其视为 an absolute positioned element may be recognized as hidden although their child elements are visible .这看起来有点违反直觉 - 尽管仔细查看jQuery文档会提供相关信息:
所以这对于盒子模型和元素的计算样式实际上是有意义的 . 即使宽度和高度未明确设置为0,也可以隐式设置它们 .
看看下面的例子:
UPDATE FOR JQUERY 3.x:
使用jQuery 3,所描述的行为将发生变化!如果元素具有任何布局框,包括零宽度和/或高度的布局框,则将其视为可见元素 .
JSFiddle与jQuery 3.0.0-alpha1:
http://jsfiddle.net/pM2q3/7/
然后,相同的JS将具有此输出:
这些答案都没有解决我理解的问题,这就是我要搜索的内容,“我如何处理有
visibility: hidden
的项目?” .:visible
和:hidden
都不会处理这个,因为他们都在寻找文档显示 . 据我所知,没有选择器来处理CSS可见性 . 以下是我如何解决它(标准的jQuery选择器,可能有更简洁的语法):例:
如何 element visibility and jQuery works ;
可以使用
display:none
,visibility:hidden
或opacity:0
隐藏元素 . 这些方法之间的区别:display:none
隐藏元素,它不占用任何空间;visibility:hidden
隐藏了元素,但它仍然占用了布局中的空间;opacity:0
将元素隐藏为"visibility:hidden",它仍占用布局中的空间;唯一的区别是不透明度让一个元素部分透明;Useful jQuery toggle methods:
通常在检查某些东西是否可见时,您将立即前进并使用它做其他事情 . jQuery链接使这很容易 .
因此,如果您有一个选择器并且只想在可见或隐藏时对其执行某些操作,则可以使用
filter(":visible")
或filter(":hidden")
,然后将其与您要执行的操作链接 .所以代替
if
语句,如下所示:或更高效,但更丑陋:
您可以在一行中完成所有操作:
根据the jQuery documentation的
:visible
选择器:这在某些情况下很有用,而在其他情况下则无用,因为如果要检查元素是否可见(
display != none
),忽略父项可见性,您会发现执行.css("display") == 'none'
不仅更快,而且还会正确返回可见性检查 .如果要检查可见性而不是显示,则应使用:
.css("visibility") == "hidden"
.还要考虑the additional jQuery notes:
另外,如果您担心性能问题,请查看Now you see me… show/hide performance(2010-05-04) . 并使用其他方法来显示和隐藏元素 .
你需要检查两个......显示和可见性:
如果我们检查
$(this).is(":visible")
,jQuery自动检查这两件事 .您应该考虑的另一个答案是,如果您隐藏了一个元素,您应该使用jQuery,但不是实际隐藏它,而是删除整个元素,但是将其HTML内容和标记本身复制到jQuery变量中,然后你需要做的就是测试屏幕上是否有这样的标签,使用正常的
if (!$('#thetagname').length)
.这适用于我,我使用
show()
和hide()
使我的div隐藏/可见:毕竟,没有一个例子适合我,所以我写了自己的 .
Tests (不支持Internet Explorer
filter:alpha
):a)检查文档是否未隐藏
b)检查元素的宽度/高度/不透明度是否为0或内联样式是否为
display:none
/visibility:hidden
c)检查元素的中心(也因为它比测试每个像素/角更快)是否被其他元素(和所有祖先,例如:
overflow:hidden
/ scroll / one element over theother)或屏幕边缘隐藏d)检查元素是否具有零宽度/高度/不透明度或
display:none
/ visibility:隐藏在计算样式中(在所有祖先中)Tested on
Android 4.4(原生浏览器/ Chrome / Firefox),Firefox(Windows / Mac),Chrome(Windows / Mac),Opera(Windows Presto / Mac Webkit),Internet Explorer(Internet Explorer 5-11文档模式,虚拟Internet Explorer 8)机器),Safari(Windows / Mac / iOS)
如何使用:
也许你可以做这样的事情
激活使用 visible 检查adblocker的示例:
“ablockercheck”是adblocker阻止的ID . 因此,检查它是否可见,您可以检测adblocker是否已打开 .
我会使用CSS类
.hide { display: none!important; }
.为了隐藏/显示,我调用
.addClass("hide")/.removeClass("hide")
. 为了检查可见性,我使用.hasClass("hide")
.它's a simple and clear way to check/hide/show elements, if you don'计划使用
.toggle()
或.animate()
方法 .上述方法不考虑父级的可见性 . 要考虑父级,您应该使用
.is(":hidden")
或.is(":visible")
.例如,
ebdiv
应设置为style="display:none;"
. 它适用于show和hide:可以创建函数以检查可见性/显示属性,以便衡量元素是否在UI中显示 .
Working Fiddle
要检查它是否不可见,我使用
!
:或者以下也是sam,将jQuery选择器保存在变量中,以便在需要多次时获得更好的性能:
使用类切换,而不是样式编辑 . . .
使用为"hiding"元素指定的类很容易,也是最有效的方法之一 . 使用
Display
样式的'none'切换类'hidden'将比直接编辑该样式执行得更快 . 我在Stack Overflow问题Turning two elements visible/hidden in the same div中详细解释了一些 .JavaScript最佳实践和优化
以下是Google前端工程师Nicholas Zakas撰写的Google Tech Talk的真实启发视频:
因为
Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout
(如jQuery :visible Selector所述) - 我们可以通过这种方式检查元素是否真的可见:您也可以使用纯JavaScript执行此操作:
笔记:
无处不在
适用于嵌套元素
适用于CSS和内联样式
不需要框架
由于问题涉及单个元素,因此该代码可能更合适:
与twernt's suggestion相同,但应用于单个元素;它matches the algorithm recommended in the jQuery FAQ