jQuery 查找元素是否可见（JavaScript）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16255423/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Finding if element is visible (JavaScript )
提问by Devon Bernard
I have a javascript function that tries to determine whether a div is visible and does various processes with that variable. I am successfully able to swap an elements visibility by changing it's display between none and block; but I cannot store this value...
我有一个 javascript 函数，它试图确定一个 div 是否可见并使用该变量执行各种处理。通过在 none 和 block 之间更改元素的显示，我能够成功地交换元素的可见性；但我无法存储这个值...
I have tried getting the elements display attribute value and finding if the the element ID is visible but neither has worked. When I try .getAttribute it always returns null; I am not sure why because I know that id is defined and it has a display attribute.
我尝试获取元素显示属性值并查找元素 ID 是否可见，但两者都不起作用。当我尝试 .getAttribute 时，它总是返回 null；我不知道为什么，因为我知道 id 已定义并且它具有 display 属性。
Here is the code of the two different methods I have tried:
这是我尝试过的两种不同方法的代码：
var myvar = $("#mydivID").is(":visible");
var myvar = document.getElementById("mydivID").getAttribute("display");
Any guidance or assistance would be greatly appreciated.
任何指导或帮助将不胜感激。
采纳答案by SeinopSys
Display is not an attribute, it's a CSS property inside the styleattribute.
Display 不是属性，它是属性内的 CSSstyle属性。
You may be looking for
您可能正在寻找
var myvar = document.getElementById("mydivID").style.display;
or
或者
var myvar = $("#mydivID").css('display');
回答by pala?н
Try like this:
像这样尝试：
$(function () {
// Handler for .ready() called.
if ($("#mydivID").is(":visible")) {
alert('Element is visible');
}
});
Please make sure to include the jQuery file inside the headtag, as follows
请确保在head标签内包含jQuery文件，如下
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
回答by Gaurav
If you would like to do this only javascript way you may try
如果您只想以 javascript 方式执行此操作，您可以尝试
window.getComputedStyle(document.getElementById("mydivID"),null).getPropertyValue('display')
回答by Nirvana Tikku
Let's take a second to see what .is(":visible")is doing in jQuery, shall we?
让我们花点时间看看.is(":visible")jQuery 做了什么，好吗？
Here's a link: https://github.com/jquery/jquery/blob/master/src/css.js#L529
这是一个链接：https: //github.com/jquery/jquery/blob/master/src/css.js#L529
return !jQuery.expr.filters.hidden( elem );
return !jQuery.expr.filters.hidden( elem );
where
在哪里
jQuery.expr.filters.hidden = function( elem ) {
// Support: Opera <= 12.12
// Opera reports offsetWidths and offsetHeights less than zero on some elements
return elem.offsetWidth <= 0 && elem.offsetHeight <= 0;
};
So, it's just checking the offset width and height of the element.
所以，它只是检查元素的偏移宽度和高度。
That said, and also worth noting, when jQuery checks to see if an element is hidden(i.e. like when triggering a 'toggle' event), it performs a check on the display propertyand its existence in the dom. https://github.com/jquery/jquery/blob/master/src/css.js#L43
也就是说，同样值得注意的是，当 jQuery 检查一个元素是否被隐藏时（例如，当触发 'toggle' 事件时），它会检查display 属性及其在 dom 中的存在。https://github.com/jquery/jquery/blob/master/src/css.js#L43
