如何使元素的可见度.hide(), .show(),或.toggle()?
如果一个元素是visible或hidden?
当前回答
您可以使用 jQuery 的is()函数可以检查选定元素的可见或隐藏。该方法沿 DOM 元素沿 DOM 元素绕行查找匹配,以找到符合已传递参数的匹配。如果匹配返回错误,则返回为真实。
<script>
($("#myelement").is(":visible"))? alert("#myelement is visible") : alert("#myelement is hidden");
</script>
其他回答
if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
// 'element' is hidden
}
上述方法不考虑父母亲的可见度。为了也考虑父母的可见度,您应该使用.is(":hidden")或.is(":visible").
例如,
<div id="div1" style="display:none">
<div id="div2" style="display:block">Div2</div>
</div>
上述方法将考虑
div2可见时可见:visible。但是,在很多情况下,特别是当您需要找到隐藏的父(母)是否发现任何错误时,上述情况也许有用,因为在这种情况下,隐藏的母(母)之间是否有错误。:visible不会工作。
$(document).ready(function() {
var visible = $('#tElement').is(':visible');
if(visible) {
alert("visible");
// Code
}
else
{
alert("hidden");
}
});<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<input type="text" id="tElement" style="display:block;">Firstname</input>因为Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout(截至2004年12月1日jj 查询: 可见选择器- 我们可以检查元素是否真的以这种方式可见:
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;
}
});
人们可以简单地使用hidden或visible属性, 如 :
$('element:hidden')
$('element:visible')
或者您可以简化相同的是如下所示。
$(element).is(":visible")
测试一个元素时:hidden在 jQuery 中选择器一个绝对定位元素可能被确认为隐藏,尽管其子元素是可见的.
虽然仔细看一看jQuery文件提供了相关信息,
要素可被视为隐藏,原因如下:[.]其宽度和高度明确定为0。 [.]
因此,在框模型和元素的计算样式方面,这实际上是有道理的。即使没有设置宽度和高度明确无误可设定 0 个至 0个隐含.
举例如下:
console.log($('.foo').is(':hidden')); // true
console.log($('.bar').is(':hidden')); // false.foo {
position: absolute;
left: 10px;
top: 10px;
background: #ff0000;
}
.bar {
position: absolute;
left: 10px;
top: 10px;
width: 20px;
height: 20px;
background: #0000ff;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo">
<div class="bar"></div>
</div>jQuery 3. x 的更新 :
当 j 查询 3 时, 描述的行为将会改变 ! 如果元素有任何布局框, 包括宽度和/ 或高度为零的布局框, 元素将被视为可见 。
JSF与jQuery 3. 0.0- 阿尔法1:
同样的 JavaScript 代码将会有此输出 :
console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false
