检查元素在 DOM 中是否可见

结合上面的几个答案：

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

2021解决方案

根据MDN docs，交互观察者异步观察目标元素与祖先元素或顶级文档视口的交集的变化。这意味着每次元素与视口相交时，交互观察者都会触发。

截至2021年，目前所有浏览器都支持除IE外的交叉点观察器。

执行

const el = document.getElementById("your-target-element");
const observer = new IntersectionObserver((entries) => {
    if(entries[0].isIntersecting){
         // el is visible
    } else {
         // el is not visible
    }
});

observer.observe(el); // Asynchronous call

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

如果元素是常规可见的（显示：块和可见性：可见），但某些父容器是隐藏的，那么我们可以使用 clientWidth 和 clientHeight 进行检查。

function isVisible (ele) {
  return  ele.clientWidth !== 0 &&
    ele.clientHeight !== 0 &&
    (ele.style.opacity !== '' ? parseFloat(ele.style.opacity) > 0 : true);
}

Plunker (click here)

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

function visible(elm) {
  if(!elm.offsetHeight && !elm.offsetWidth) { return false; }
  if(getComputedStyle(elm).visibility === 'hidden') { return false; }
  return true;
}

这是基于以下事实：

display: none 元素（甚至是嵌套元素）没有宽度和高度。

即使对于嵌套元素，可见性也是隐藏的。

因此无需测试 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;
}

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

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 的一些见解。但是，您的特定用例与标准用例略有不同，因此我将避免标记：

如何判断 DOM 元素在当前视口中是否可见？

如何使用javascript检查元素是否真的可见？

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

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

例如，使用 display: none 对元素是否隐藏的简单检查可能如下所示：

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

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

改进@Guy Messika 的 answer above，如果中心点 X 为 < 则中断并返回 false 0 是错误的，因为右侧的元素可能会进入视图。这是一个修复：

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

所以看起来有一个与所有者文档相关的额外检查

我想知道这是否真的适用于以下情况：

基于 zIndex 隐藏在其他元素后面的元素 透明度完全使其不可见的元素 位于屏幕外的元素（即左侧：-1000px） 具有可见性的元素：隐藏 具有显示的元素：无 没有可见文本或子元素的元素 设置了高度或宽度的元素为 0

为了详细说明每个人的出色答案，这里是 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;
}

它检查每个父母的不透明度、显示和矩形。

let element = document.getElementById('element');
let rect = element.getBoundingClientRect();

if(rect.top == 0 && 
  rect.bottom == 0 && 
  rect.left == 0 && 
  rect.right == 0 && 
  rect.width == 0 && 
  rect.height == 0 && 
  rect.x == 0 && 
  rect.y == 0)
{
  alert('hidden');
}
else
{
  alert('visible');
}

const isVisible = (selector) => { let selectedElement let topElement let selectedData selectedElement = document.querySelector(selector) if (!selectedElement) { return false } selectedData = selectedElement.getBoundingClientRect() if (!selectedData || !Object.keys( selectedData)) { return false } if (!(selectedData.width > 0) || !(selectedData.height > 0)) { return false } topElement = document.elementFromPoint(selectedData.top, selectedData.left) if (selectedElement ! == topElement) { return false } return true } const output = document.querySelector('.text') output.innerHTML = '.x 元素可见：' + isVisible('.x') .block { width: 100px;高度：100px；背景：黑色； } .y { 背景：红色；边距顶部：-100px； }

Chrome 103 引入了 Element.isVisible()，如果元素可见则返回 true，否则返回 false。

它检查会使元素不可见的各种因素，包括 display:none、visibility、content-visibility 和 opacity。

这是我编写的代码，用于查找几个相似元素中唯一可见的元素，并在没有 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");
    }
  }

如果您正在抓取网站，一种对我有用的非常低效的方法是突出显示任何元素，并截屏，然后检查屏幕截图是否已更改。

//Screenshot

function makeSelected(element){
    let range = new Range()
    range.selectNode(element)
    let selection = window.getSelection()
    selection.removeAllRanges()
    selection.addRange(range)
}
// screenshot again and check for diff

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

这就是我所做的：

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>

var visible = document.getElementById("yourelementID's");
 if (visible){
          // make events
 } else
 {
   //other events
 }

在很多情况下这不一定有效，但在我的情况下，我正在使用它，它可以很好地满足我的需要。因此，如果您正在寻找一个基本解决方案（它不涵盖所有可能的情况），如果这个简单的解决方案适合您的特定需求，它“可能”对您有所帮助。

var element= document.getElementById('elementId');

if (element.style.display == "block"){

<!-- element is visible -->

} else {

<!-- element is hidden-->

}