检查元素在 DOM 中是否可见

javascript dom

2022-08-29 23:04:34

有没有办法检查一个元素在纯JS（没有jQuery）中是否可见？

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

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

但它似乎没有工作。我想知道我应该检查哪些属性。我想到的是：

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

我可能错过了其他什么？

答案 1

根据此 MDN 文档，每当元素或其任何父元素通过显示样式属性隐藏时，该元素的属性就会返回。只需确保元素不是固定的。如果页面上没有元素，则用于检查此内容的脚本可能如下所示：offsetParentnullposition: 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可能更直接一些，因为它考虑了更多的边缘情况，但我敢打赌它的速度也慢了很多，所以如果你必须多次重复此操作，最好避免它。

答案 2

所有其他解决方案都为我打破了某些情况。

看到获胜的答案打破在：

http://plnkr.co/edit/6CSCA2fe4Gqt4jCBP2wu?p=preview

最终，我决定最好的解决方案是 - 但是，这不是纯粹的javascript。它是jquery..$(elem).is(':visible')

所以我偷看了他们的来源，找到了我想要的东西

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