检查元素在DOM中是否可见

有什么方法可以检查元素在纯JS（无jQuery）中是否可见？

因此，例如，在此页面中：Performance Bikes，如果将鼠标悬停在Deals上（位于顶部菜单上），则会显示一个交易窗口，但在开始时未显示。它在HTML中，但不可见。

那么，给定一个DOM元素，我如何检查它是否可见？我试过了：

window.getComputedStyle(my_element)['display']);

但它似乎不起作用。我想知道应该检查哪些属性。我想到：

display !== 'none'
visibility !== 'hidden'

还有其他我可能会想念的东西吗？

根据此MDN文档，每当元素或元素的任何父元素通过display style属性被隐藏时，元素的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可能更直接一些，因为它可以解决更多的情况，但我敢打赌，它的速度也要慢得多，因此，如果您必须重复执行多次此操作，最好避免这种情况。

所有其他解决方案在某些情况下对我来说都是无效的。

请参阅以下获奖答案：

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

如果您对用户可见感兴趣，请执行以下操作：

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;
    });
});

这可能会有所帮助： 通过将元素放置在最左边的位置来隐藏该元素，然后检查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 visible!!");        
}

jsFiddle

使用与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！

结合以上几个答案：

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后面，或者其内容可能不可见，但边框仍然可见。在某种程度上，“可见”是一个主观术语。

如果一个人愿意忽略某些边缘情况（请查看注释），那么与AlexZ的getComputedStyle（）解决方案相比，我拥有一个性能更高的解决方案：

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可见性属性为“隐藏”等）。

如果element是常规可见的（display：block和visibillity：visible），但是某些父容器是隐藏的，那么我们可以使用clientWidth和clientHeight进行检查。

function isVisible (ele) {
  return  ele.clientWidth !== 0 &&
    ele.clientHeight !== 0 &&
    ele.style.opacity !== 0 &&
    ele.style.visibility !== 'hidden';
}

柱塞（单击此处）

如果我们只是收集检测可见性的基本方法，请不要忘记：

opacity > 0.01; // probably more like .1 to actually be visible, but YMMV

关于如何获取属性：

element.getAttribute(attributename);

因此，在您的示例中：

document.getElementById('snDealsPanel').getAttribute('visibility');

但是呢？它在这里不起作用。仔细观察，您会发现可见性不是作为元素的属性而是在使用属性进行更新style。这是尝试做自己正在做的许多问题之一。其中：您不能保证元素中确实有东西要看，因为它的可见性，显示性和不透明度都具有正确的值。它仍然可能缺少内容，或者可能缺少高度和宽度。另一个物体可能会使其模糊。要获取更多详细信息，可以通过Google的快速搜索找到此内容，甚至包括一个尝试解决问题的库。（YMMV）

请查看以下内容，这些内容可能是该问题的重复部分，并且答案出色，包括强大的约翰·雷西格（John Resig）的一些见识。但是，您的特定用例与标准用例略有不同，因此，我将避免标记：

• 如何判断DOM元素在当前视口中是否可见？
• 如何使用javascript检查元素是否真正可见？

（编辑：OP表示他正在裁剪页面，而不创建页面，因此下面不适用）更好的选择吗？将元素的可见性绑定到模型属性，并始终使可见性取决于该模型，就像Angular对ng-show所做的一样。您可以使用所需的任何工具来做到这一点：Angular，普通的JS等。更好的是，您可以随时间更改DOM实现，但始终可以从模型而不是DOM中读取状态。从DOM读取您的真相是不好的。又慢 检查模型好得多，并信任您的实现以确保DOM状态反映模型。（并使用自动测试来确认该假设。）

接受的答案对我没有用。2020年答案：

1）（elem.offsetParent！== null）方法在Firefox中可以正常工作，但在Chrome中则不能。对于Chrome，“位置：固定”；即使元素在页面中可见，也将使offsetParent返回“ null”。

演示：

//different results in Chrome and Firefox
console.log(document.querySelector('#hidden1').offsetParent); //null Chrome & Firefox
console.log(document.querySelector('#fixed1').offsetParent); //null in Chrome, not null in Firefox

    <div id="hidden1" style="display:none;"></div>
    <div id="fixed1" style="position:fixed;"></div>

您可以看到这个人megatest https://stackoverflow.com/a/11639664/4481831（使用多个浏览器运行以查看差异）。

2）（getComputedStyle（elem）.display！=='none'）不起作用，因为父元素的display属性之一设置为none时，该元素不可见，getComputedStyle将无法捕获该元素。

演示：

var child1 = document.querySelector('#child1');
console.log(getComputedStyle(child1).display);
//child will show "block" instead of "none"

<div id="parent1" style="display:none;">
  <div id="child1" style="display:block"></div>
</div>

3）（elem.clientHeight！== 0）。此方法不受位置固定的影响，并且还会检查元素父级是否不可见。但是它具有没有css布局的简单元素的问题，请参阅此处的更多内容

演示：

console.log(document.querySelector('#div1').clientHeight); //not zero
console.log(document.querySelector('#span1').clientHeight); //zero

<div id="div1">test1 div</div>
<span id="span1">test2 span</span>

4）（elem.getClientRects（）。length！== 0）似乎超过了前面3种方法的问题。但是，使用CSS技巧（除“ display：none”以外）隐藏在页面中的元素存在问题。

console.log(document.querySelector('#notvisible1').getClientRects().length);
console.log(document.querySelector('#notvisible1').clientHeight);
console.log(document.querySelector('#notvisible2').getClientRects().length);
console.log(document.querySelector('#notvisible2').clientHeight);
console.log(document.querySelector('#notvisible3').getClientRects().length);
console.log(document.querySelector('#notvisible3').clientHeight);

<div id="notvisible1" style="height:0; overflow:hidden; background-color:red;">not visible 1</div>

<div id="notvisible2" style="visibility:hidden; background-color:yellow;">not visible 2</div>

<div id="notvisible3" style="opacity:0; background-color:blue;">not visible 3</div>

结论： 所以我向您展示的是没有一种方法是完美的。要进行适当的可见性检查，您必须结合使用后三种方法。

仅供参考，应注意getBoundingClientRect()在某些情况下可以使用。

例如，使用元素进行隐藏的简单检查display: none可能看起来像这样：

var box = element.getBoundingClientRect();
var visible = box.width && box.height;

这也很方便，因为它还涵盖了零宽度，零高度和position: fixed大小写。但是，它不会报告用opacity: 0或隐藏的元素visibility: hidden（但不会offsetParent）。

所以我发现是最可行的方法：

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折叠元素（具有宽度但没有高度-反之亦然）也不是真正可见的。但是话又说回来，它们并不是每一个都隐藏着。

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;
}

改进@Guy Messika的上述答案，如果中心点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;
}

来自http://code.jquery.com/jquery-1.11.1.js的jQuery代码具有isHidden参数

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 );
};

因此，似乎存在与所有者文档相关的额外检查

我想知道这是否确实包含以下情况：

1. 隐藏在基于zIndex的其他元素后面的元素
2. 透明的元素使它们不可见
3. 元素位于屏幕外（即，左：-1000px）
4. 具有可见性的元素：隐藏
5. 显示元素：无
6. 没有可见文本或子元素的元素
7. 高度或宽度设置为0的元素

这是我编写的代码，用于在几个类似的元素中找到唯一可见的代码，并返回其“ class”属性的值而不使用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");
    }
  }

这是我所做的：

HTML和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>

这是一种针对所有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属性，并且用途广泛且可靠。