有没有办法可以检查一个元素在纯JS（没有jQuery）中是否可见？
因此，例如，在此页面中显示：Performance Bikes，如果您将鼠标悬停在商品上（在顶部菜单上），则会显示一个交易窗口，但在开始时它未显示。它在HTML中，但不可见。
因此，给定一个DOM元素，我该如何检查它是否可见？我试过了：
window.getComputedStyle(my_element)['display']);
但它似乎没有用。我想知道应该检查哪些属性。我想到了：
display !== 'none'
visibility !== 'hidden'
我可能遗失的其他任何人？
答案 0 :(得分：473)
根据this MDN documentation，只要元素的offsetParent属性或其任何父元素通过显示样式属性隐藏，它就会返回null。只需确保元素不固定。如果您的网页上没有position: fixed;元素，则检查此内容的脚本可能如下所示：
// Where el is the DOM element you'd like to test for visibility
function isHidden(el) {
return (el.offsetParent === null)
}
另一方面，如果您做具有可能在此搜索中被捕获的位置固定元素，您将遗憾地（并且慢慢地）使用window.getComputedStyle()。在这种情况下的功能可能是：
// Where el is the DOM element you'd like to test for visibility
function isHidden(el) {
var style = window.getComputedStyle(el);
return (style.display === 'none')
}
选项＃2可能更简单一些，因为它占据了更多的边缘情况，但我打赌它的速度也很慢，所以如果你不得不多次重复这个操作，最好还是避免它。
答案 1 :(得分：86)
所有其他解决方案对我来说都有所破坏..
查看获胜的答案：
http://plnkr.co/edit/6CSCA2fe4Gqt4jCBP2wu?p=preview
最终，我认为最好的解决方案是$(elem).is(':visible') - 但是，这不是纯粹的javascript。这是jquery ..
所以我偷看了他们的来源并找到了我想要的东西
jQuery.expr.filters.visible = function( elem ) {
return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};
这是来源：https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js
答案 2 :(得分：37)
如果您对用户可见的内容感兴趣：
function isVisible(elem) {
if (!(elem instanceof Element)) throw Error('DomUtil: elem is not an element.');
const style = getComputedStyle(elem);
if (style.display === 'none') return false;
if (style.visibility !== 'visible') return false;
if (style.opacity < 0.1) return false;
if (elem.offsetWidth + elem.offsetHeight + elem.getBoundingClientRect().height +
elem.getBoundingClientRect().width === 0) {
return false;
}
const elemCenter = {
x: elem.getBoundingClientRect().left + elem.offsetWidth / 2,
y: elem.getBoundingClientRect().top + elem.offsetHeight / 2
};
if (elemCenter.x < 0) return false;
if (elemCenter.x > (document.documentElement.clientWidth || window.innerWidth)) return false;
if (elemCenter.y < 0) return false;
if (elemCenter.y > (document.documentElement.clientHeight || window.innerHeight)) return false;
let pointContainer = document.elementFromPoint(elemCenter.x, elemCenter.y);
do {
if (pointContainer === elem) return true;
} while (pointContainer = pointContainer.parentNode);
return false;
}
测试（使用mocha术语）：
describe.only('visibility', function () {
let div, visible, notVisible, inViewport, leftOfViewport, rightOfViewport, aboveViewport,
belowViewport, notDisplayed, zeroOpacity, zIndex1, zIndex2;
before(() => {
div = document.createElement('div');
document.querySelector('body').appendChild(div);
div.appendChild(visible = document.createElement('div'));
visible.style = 'border: 1px solid black; margin: 5px; display: inline-block;';
visible.textContent = 'visible';
div.appendChild(inViewport = visible.cloneNode(false));
inViewport.textContent = 'inViewport';
div.appendChild(notDisplayed = visible.cloneNode(false));
notDisplayed.style.display = 'none';
notDisplayed.textContent = 'notDisplayed';
div.appendChild(notVisible = visible.cloneNode(false));
notVisible.style.visibility = 'hidden';
notVisible.textContent = 'notVisible';
div.appendChild(leftOfViewport = visible.cloneNode(false));
leftOfViewport.style.position = 'absolute';
leftOfViewport.style.right = '100000px';
leftOfViewport.textContent = 'leftOfViewport';
div.appendChild(rightOfViewport = leftOfViewport.cloneNode(false));
rightOfViewport.style.right = '0';
rightOfViewport.style.left = '100000px';
rightOfViewport.textContent = 'rightOfViewport';
div.appendChild(aboveViewport = leftOfViewport.cloneNode(false));
aboveViewport.style.right = '0';
aboveViewport.style.bottom = '100000px';
aboveViewport.textContent = 'aboveViewport';
div.appendChild(belowViewport = leftOfViewport.cloneNode(false));
belowViewport.style.right = '0';
belowViewport.style.top = '100000px';
belowViewport.textContent = 'belowViewport';
div.appendChild(zeroOpacity = visible.cloneNode(false));
zeroOpacity.textContent = 'zeroOpacity';
zeroOpacity.style.opacity = '0';
div.appendChild(zIndex1 = visible.cloneNode(false));
zIndex1.textContent = 'zIndex1';
zIndex1.style.position = 'absolute';
zIndex1.style.left = zIndex1.style.top = zIndex1.style.width = zIndex1.style.height = '100px';
zIndex1.style.zIndex = '1';
div.appendChild(zIndex2 = zIndex1.cloneNode(false));
zIndex2.textContent = 'zIndex2';
zIndex2.style.left = zIndex2.style.top = '90px';
zIndex2.style.width = zIndex2.style.height = '120px';
zIndex2.style.backgroundColor = 'red';
zIndex2.style.zIndex = '2';
});
after(() => {
div.parentNode.removeChild(div);
});
it('isVisible = true', () => {
expect(isVisible(div)).to.be.true;
expect(isVisible(visible)).to.be.true;
expect(isVisible(inViewport)).to.be.true;
expect(isVisible(zIndex2)).to.be.true;
});
it('isVisible = false', () => {
expect(isVisible(notDisplayed)).to.be.false;
expect(isVisible(notVisible)).to.be.false;
expect(isVisible(document.createElement('div'))).to.be.false;
expect(isVisible(zIndex1)).to.be.false;
expect(isVisible(zeroOpacity)).to.be.false;
expect(isVisible(leftOfViewport)).to.be.false;
expect(isVisible(rightOfViewport)).to.be.false;
expect(isVisible(aboveViewport)).to.be.false;
expect(isVisible(belowViewport)).to.be.false;
});
});
答案 3 :(得分：33)
这可能有所帮助： 通过将元素放在最左边的位置来隐藏元素，然后检查offsetLeft属性。如果你想使用jQuery，你只需检查:visible选择器并获得元素的可见性状态。
HTML：
<div id="myDiv">Hello</div>
CSS：
<!-- for javaScript-->
#myDiv{
position:absolute;
left : -2000px;
}
<!-- for jQuery -->
#myDiv{
visibility:hidden;
}
javaScript：
var myStyle = document.getElementById("myDiv").offsetLeft;
if(myStyle < 0){
alert("Div is hidden!!");
}
jQuery：
if( $("#MyElement").is(":visible") == true )
{
alert("Div is hidden!!");
}
答案 4 :(得分：24)
使用与jQuery相同的代码：
jQuery.expr.pseudos.visible = function( elem ) {
return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};
所以，在一个函数中：
function isVisible(e) {
return !!( e.offsetWidth || e.offsetHeight || e.getClientRects().length );
}
在Win / IE10，Linux / Firefox.45，Linux / Chrome.52中扮演魅力......
非常感谢没有jQuery的jQuery！
答案 5 :(得分：8)
结合以上几个答案：
function isVisible (ele) {
var style = window.getComputedStyle(ele);
return style.width !== "0" &&
style.height !== "0" &&
style.opacity !== "0" &&
style.display!=='none' &&
style.visibility!== 'hidden';
}
就像AlexZ所说的那样，如果你更具体地了解你正在寻找的东西，这可能比你的其他一些选择要慢，但这应该抓住隐藏元素的所有主要方式。
但是，这也取决于你可以看到什么。例如，div的高度可以设置为0px，但内容仍然可见，具体取决于溢出属性。或者div的内容可以与背景颜色相同，因此用户看不到它，但仍然在页面上呈现。或者div可以移出屏幕或隐藏在其他div之后，或者它的内容可能不可见但边框仍然可见。在某种程度上，“可见”是一个主观术语。
答案 6 :(得分：7)
如果元素是常规可见的（显示：块和visibillity：可见），但隐藏了某个父容器，那么我们可以使用 clientWidth 和 clientHeight 进行检查。
function isVisible (ele) {
return ele.clientWidth !== 0 &&
ele.clientHeight !== 0 &&
ele.style.opacity !== 0 &&
ele.style.visibility !== 'hidden';
}
答案 7 :(得分：6)
与AlexZ's getComputedStyle() solution相比，我有一个更高效的解决方案，当一个人有位置'固定'元素时，如果有人愿意忽略一些边缘情况（检查评论）：
function isVisible(el) {
/* offsetParent would be null if display 'none' is set.
However Chrome, IE and MS Edge returns offsetParent as null for elements
with CSS position 'fixed'. So check whether the dimensions are zero.
This check would be inaccurate if position is 'fixed' AND dimensions were
intentionally set to zero. But..it is good enough for most cases.*/
if (!el.offsetParent && el.offsetWidth === 0 && el.offsetHeight === 0) {
return false;
}
return true;
}
旁注：严格来说，首先需要定义“可见性”。在我的情况下，我正在考虑一个元素可见，只要我可以运行所有DOM方法/属性没有问题（即使不透明度为0或CSS可见性属性为'隐藏'等）。
答案 8 :(得分：5)
如果我们只是收集检测能见度的基本方法，请不要忘记：
opacity > 0.01; // probably more like .1 to actually be visible, but YMMV
至于如何获取属性：
element.getAttribute(attributename);
所以，在你的例子中：
document.getElementById('snDealsPanel').getAttribute('visibility');
style属性。这是尝试做你正在做的事情的许多问题之一。其中：你不能保证元素中实际上有东西可见，只是因为它的可见性，显示和不透明度都具有正确的值。它仍然可能缺乏内容，或者可能缺少高度和宽度。另一个对象可能会模糊它。有关更多详细信息，快速Google搜索会显示this，甚至还包括一个试图解决问题的库。 （YMMV）
查看以下内容，这些内容可能与此问题重复，并提供了出色的答案，包括强大的John Resig的一些见解。但是，您的特定用例与标准用例略有不同，因此我将避免标记：
（编辑：OP说他是划伤页面，不是创建它们，所以不适用） 一个更好的选择？将元素的可见性绑定到模型属性，并始终使可视化取决于该模型，就像Angular对ng-show所做的那样。你可以使用你想要的任何工具来做到这一点：Angular，普通的JS，等等。更好的是，您可以随着时间的推移更改DOM实现，但您始终能够从模型而不是DOM中读取状态。从DOM中读出你的真相很糟糕。而且很慢。更好的方法是检查模型，并相信您的实现以确保DOM状态反映模型。 （并使用自动化测试来确认该假设。）
答案 9 :(得分：3)
所以我发现的是最可行的方法：
function visible(elm) {
if(!elm.offsetHeight && !elm.offsetWidth) { return false; }
if(getComputedStyle(elm).visibility === 'hidden') { return false; }
return true;
}
这是基于这些事实：
display: none元素（即使是嵌套的元素）也没有宽度和高度。visiblity即使对于嵌套元素也是hidden。因此无需测试offsetParent或在DOM树中循环以测试哪个父级具有visibility: hidden。这甚至可以在IE 9中使用。
你可以争论opacity: 0和折叠元素（宽度但没有高度 - 反之亦然）也不是真的可见。但话说再说它们并不是隐藏的。
答案 10 :(得分：3)
ohad navon回答的一点点补充。
如果元素的中心属于另一个元素，我们将无法找到它。
所以要确保找到元素的一个点是可见的
function isElementVisible(elem) {
if (!(elem instanceof Element)) throw Error('DomUtil: elem is not an element.');
const style = getComputedStyle(elem);
if (style.display === 'none') return false;
if (style.visibility !== 'visible') return false;
if (style.opacity === 0) return false;
if (elem.offsetWidth + elem.offsetHeight + elem.getBoundingClientRect().height +
elem.getBoundingClientRect().width === 0) {
return false;
}
var elementPoints = {
'center': {
x: elem.getBoundingClientRect().left + elem.offsetWidth / 2,
y: elem.getBoundingClientRect().top + elem.offsetHeight / 2
},
'top-left': {
x: elem.getBoundingClientRect().left,
y: elem.getBoundingClientRect().top
},
'top-right': {
x: elem.getBoundingClientRect().right,
y: elem.getBoundingClientRect().top
},
'bottom-left': {
x: elem.getBoundingClientRect().left,
y: elem.getBoundingClientRect().bottom
},
'bottom-right': {
x: elem.getBoundingClientRect().right,
y: elem.getBoundingClientRect().bottom
}
}
for(index in elementPoints) {
var point = elementPoints[index];
if (point.x < 0) return false;
if (point.x > (document.documentElement.clientWidth || window.innerWidth)) return false;
if (point.y < 0) return false;
if (point.y > (document.documentElement.clientHeight || window.innerHeight)) return false;
let pointContainer = document.elementFromPoint(point.x, point.y);
if (pointContainer !== null) {
do {
if (pointContainer === elem) return true;
} while (pointContainer = pointContainer.parentNode);
}
}
return false;
}
答案 11 :(得分：2)
仅供参考，应注意getBoundingClientRect()在某些情况下可以正常工作。
例如，使用display: none隐藏元素的简单检查可能看起来像这样：
var box = element.getBoundingClientRect();
var visible = box.width && box.height;
这也很方便，因为它还包括零宽度，零高度和position: fixed个案例。但是，它不会报告使用opacity: 0或visibility: hidden隐藏的元素（但offsetParent也不会。）
答案 12 :(得分：2)
来自http://code.jquery.com/jquery-1.11.1.js的jQuery代码有一个isHidden param
var isHidden = function( elem, el ) {
// isHidden might be called from jQuery#filter function;
// in that case, element will be second argument
elem = el || elem;
return jQuery.css( elem, "display" ) === "none" || !jQuery.contains( elem.ownerDocument, elem );
};
所以看起来有一个与所有者文档相关的额外检查
我想知道这是否真的抓住了以下情况：
答案 13 :(得分：1)
当且仅当元素及其所有祖先可见时，才返回true。它仅查看display和visibility样式属性：
var isVisible = function(el){
// returns true iff el and all its ancestors are visible
return el.style.display !== 'none' && el.style.visibility !== 'hidden'
&& (el.parentElement? isVisible(el.parentElement): true)
};
答案 14 :(得分：1)
在@Guy Messika的answer above上进行改进，如果中心点X <0则中断并返回false是错误的，因为元素右侧可能会进入视图。解决方法：
private isVisible(elem) {
const style = getComputedStyle(elem);
if (style.display === 'none') return false;
if (style.visibility !== 'visible') return false;
if ((style.opacity as any) === 0) return false;
if (
elem.offsetWidth +
elem.offsetHeight +
elem.getBoundingClientRect().height +
elem.getBoundingClientRect().width === 0
) return false;
const elementPoints = {
center: {
x: elem.getBoundingClientRect().left + elem.offsetWidth / 2,
y: elem.getBoundingClientRect().top + elem.offsetHeight / 2,
},
topLeft: {
x: elem.getBoundingClientRect().left,
y: elem.getBoundingClientRect().top,
},
topRight: {
x: elem.getBoundingClientRect().right,
y: elem.getBoundingClientRect().top,
},
bottomLeft: {
x: elem.getBoundingClientRect().left,
y: elem.getBoundingClientRect().bottom,
},
bottomRight: {
x: elem.getBoundingClientRect().right,
y: elem.getBoundingClientRect().bottom,
},
};
const docWidth = document.documentElement.clientWidth || window.innerWidth;
const docHeight = document.documentElement.clientHeight || window.innerHeight;
if (elementPoints.topLeft.x > docWidth) return false;
if (elementPoints.topLeft.y > docHeight) return false;
if (elementPoints.bottomRight.x < 0) return false;
if (elementPoints.bottomRight.y < 0) return false;
for (let index in elementPoints) {
const point = elementPoints[index];
let pointContainer = document.elementFromPoint(point.x, point.y);
if (pointContainer !== null) {
do {
if (pointContainer === elem) return true;
} while (pointContainer = pointContainer.parentNode);
}
}
return false;
}
答案 15 :(得分：1)
不幸的是，被接受的答案对我没有用。
offsetParent 方法在Firefox中可以正常工作，但在Chrome中则不能。对于Chrome，“位置：固定”；如果该元素在页面中可见，也将使offsetParent返回“ null”，即使看到该元素，也请参阅此人的答案并测试https://stackoverflow.com/a/11639664/4481831（在多个浏览器中运行以查看差异）。
getComputedStyle 不起作用，因为该元素可以不可见，因为父级显示属性之一设置为none，getComputedStyle将无法捕获该元素。例如
javax.net.ssl.SSLHandshakeException: sun.security.validator.ValidatorException: PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilderException: unable to find valid certification path to requested target
at sun.security.ssl.Alerts.getSSLException(Unknown Source)
at sun.security.ssl.SSLSocketImpl.fatal(Unknown Source)
at sun.security.ssl.Handshaker.fatalSE(Unknown Source)
at sun.security.ssl.Handshaker.fatalSE(Unknown Source)
at sun.security.ssl.ClientHandshaker.serverCertificate(Unknown Source)
at sun.security.ssl.ClientHandshaker.processMessage(Unknown Source)
at sun.security.ssl.Handshaker.processLoop(Unknown Source)
at sun.security.ssl.Handshaker.process_record(Unknown Source)
at sun.security.ssl.SSLSocketImpl.readRecord(Unknown Source)
at sun.security.ssl.SSLSocketImpl.performInitialHandshake(Unknown Source)
at sun.security.ssl.SSLSocketImpl.startHandshake(Unknown Source)
at sun.security.ssl.SSLSocketImpl.startHandshake(Unknown Source)
at sun.net.www.protocol.https.HttpsClient.afterConnect(Unknown Source)
at sun.net.www.protocol.https.AbstractDelegateHttpsURLConnection.connect(Unknown Source)
at sun.net.www.protocol.http.HttpURLConnection.getInputStream0(Unknown Source)
at sun.net.www.protocol.http.HttpURLConnection.getInputStream(Unknown Source)
at sun.net.www.protocol.https.HttpsURLConnectionImpl.getInputStream(Unknown Source)
at com.digitalboxen.dsm.sms.WebController.connectToUrl(WebController.java:196)
at com.digitalboxen.dsm.sms.WebController.sendMessage(WebController.java:160)
at com.digitalboxen.dsm.sms.gui.SendSmsGuiController.sendSms(SendSmsGuiController.java:632)
at com.digitalboxen.dsm.sms.gui.SendSmsGuiController.manageSendSms(SendSmsGuiController.java:607)
at com.digitalboxen.dsm.sms.gui.SendSmsGuiController.lambda$sendSmsButtonAction$9(SendSmsGuiController.java:739)
at com.digitalboxen.dsm.thread.DsmTask.execute(DsmTask.java:91)
at com.digitalboxen.dsm.TaskThread.executeNextRunnable(ThreadManager.java:549)
at com.digitalboxen.dsm.TaskThread.run(ThreadManager.java:531)
var elem1 = document.querySelector('#child1');
console.log(window.getComputedStyle(elem1).display);
//will show "block" instead of "none"
我最终使用了elem。 getClientRects（）。length ！== 0（或elem.clientHeight！== 0）。此方法不受位置固定的影响，并且还会检查元素父级是否不可见。
答案 16 :(得分：1)
为了详细说明每个人的精彩答案，以下是 Mozilla Fathom 项目中使用的 the implementation：
/**
* Yield an element and each of its ancestors.
*/
export function *ancestors(element) {
yield element;
let parent;
while ((parent = element.parentNode) !== null && parent.nodeType === parent.ELEMENT_NODE) {
yield parent;
element = parent;
}
}
/**
* Return whether an element is practically visible, considering things like 0
* size or opacity, ``visibility: hidden`` and ``overflow: hidden``.
*
* Merely being scrolled off the page in either horizontally or vertically
* doesn't count as invisible; the result of this function is meant to be
* independent of viewport size.
*
* @throws {Error} The element (or perhaps one of its ancestors) is not in a
* window, so we can't find the `getComputedStyle()` routine to call. That
* routine is the source of most of the information we use, so you should
* pick a different strategy for non-window contexts.
*/
export function isVisible(fnodeOrElement) {
// This could be 5x more efficient if https://github.com/w3c/csswg-drafts/issues/4122 happens.
const element = toDomElement(fnodeOrElement);
const elementWindow = windowForElement(element);
const elementRect = element.getBoundingClientRect();
const elementStyle = elementWindow.getComputedStyle(element);
// Alternative to reading ``display: none`` due to Bug 1381071.
if (elementRect.width === 0 && elementRect.height === 0 && elementStyle.overflow !== 'hidden') {
return false;
}
if (elementStyle.visibility === 'hidden') {
return false;
}
// Check if the element is irrevocably off-screen:
if (elementRect.x + elementRect.width < 0 ||
elementRect.y + elementRect.height < 0
) {
return false;
}
for (const ancestor of ancestors(element)) {
const isElement = ancestor === element;
const style = isElement ? elementStyle : elementWindow.getComputedStyle(ancestor);
if (style.opacity === '0') {
return false;
}
if (style.display === 'contents') {
// ``display: contents`` elements have no box themselves, but children are
// still rendered.
continue;
}
const rect = isElement ? elementRect : ancestor.getBoundingClientRect();
if ((rect.width === 0 || rect.height === 0) && elementStyle.overflow === 'hidden') {
// Zero-sized ancestors don’t make descendants hidden unless the descendant
// has ``overflow: hidden``.
return false;
}
}
return true;
}
它会检查每个父级的不透明度、显示和矩形。
答案 17 :(得分：0)
这里是我编写的代码，用于查找几个相似元素中唯一可见的代码，并返回其＆＃34;类＆＃34;的值。没有jQuery的属性：
// Build a NodeList:
var nl = document.querySelectorAll('.myCssSelector');
// convert it to array:
var myArray = [];for(var i = nl.length; i--; myArray.unshift(nl[i]));
// now find the visible (= with offsetWidth more than 0) item:
for (i =0; i < myArray.length; i++){
var curEl = myArray[i];
if (curEl.offsetWidth !== 0){
return curEl.getAttribute("class");
}
}
答案 18 :(得分：0)
这是一种确定所有css属性的方法，包括可见性：
HTML：
<div id="element">div content</div>
的CSS：
#element
{
visibility:hidden;
}
的javascript：
var element = document.getElementById('element');
if(element.style.visibility == 'hidden'){
alert('hidden');
}
else
{
alert('visible');
}
适用于任何css属性，功能多样且可靠。
答案 19 :(得分：0)
这就是我所做的：
HTML＆amp; CSS：默认隐藏元素
<html>
<body>
<button onclick="myFunction()">Click Me</button>
<p id="demo" style ="visibility: hidden;">Hello World</p>
</body>
</html>
JavaScript：添加了一个代码来检查是否隐藏了可见性：
<script>
function myFunction() {
if ( document.getElementById("demo").style.visibility === "hidden"){
document.getElementById("demo").style.visibility = "visible";
}
else document.getElementById("demo").style.visibility = "hidden";
}
</script>
答案 20 :(得分：0)
使用jquery $("your-selector:visible").length; //如果可见则返回1否则返回0 例如 $(".custom-control-input:visible").length; //如果这个元素在屏幕上可见，它将返回1
答案 21 :(得分：0)
x