如何检查一个元素是否真的在JavaScript中可见？

对于第2点。

我看到没有人建议使用，对我来说，这是测试一个元素是否被另一个元素嵌套或隐藏的最快方法。可以将目标元素的偏移量传递给函数。document.elementFromPoint(x,y)

这是 elementFromPoint 上的 PPK 测试页面。

来自MDN的文档：

该方法（在 Document 和 ShadowRoot 对象上都可用）在指定坐标处返回最上面的元素（相对于视区）。elementFromPoint()

我不知道在较旧的或不那么现代的浏览器中支持多少这样的功能，但是我正在使用这样的东西（没有任何库的neeed）：

function visible(element) {
  if (element.offsetWidth === 0 || element.offsetHeight === 0) return false;
  var height = document.documentElement.clientHeight,
      rects = element.getClientRects(),
      on_top = function(r) {
        var x = (r.left + r.right)/2, y = (r.top + r.bottom)/2;
        return document.elementFromPoint(x, y) === element;
      };
  for (var i = 0, l = rects.length; i < l; i++) {
    var r = rects[i],
        in_viewport = r.top > 0 ? r.top <= height : (r.bottom > 0 && r.bottom <= height);
    if (in_viewport && on_top(r)) return true;
  }
  return false;
}

它检查元素的面积是否>0，然后检查元素的任何部分是否在视区内，并且它是否隐藏在另一个元素的“下面”（实际上我只检查元素中心的单个点，所以它不是100%确定的 - 但你可以修改脚本以在元素的所有点上放置， 如果你真的需要...）。

更新

修改on_top检查每个像素的函数：

on_top = function(r) {
  for (var x = Math.floor(r.left), x_max = Math.ceil(r.right); x <= x_max; x++)
  for (var y = Math.floor(r.top), y_max = Math.ceil(r.bottom); y <= y_max; y++) {
    if (document.elementFromPoint(x, y) === element) return true;
  }
  return false;
};

不知道性能:)