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

Question

在JavaScript中,您如何检查元素是否实际可见？

我不仅仅意味着检查visibility和display属性.我的意思是,检查元素不是

• visibility: hidden 要么 display: none
• 在另一个元素下面
• 滚动屏幕边缘

由于技术原因,我不能包含任何脚本.然而,我可以使用原型,因为它已经在页面上.

Answer 1

对于第2点.

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

这是elementFromPoint上的PPK测试页面.

Answer 2

我不知道在旧的或不那么现代的浏览器中支持多少,但我使用的是这样的东西(没有任何库的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;
};

不知道性能:)

Answer 3

正如jkl指出的那样,检查元素的可见性或显示是不够的.你必须检查它的祖先.Selenium在验证元素的可见性时执行此操作.

查看selenium-api.js文件中的Selenium.prototype.isVisible方法.

http://svn.openqa.org/svn/selenium-on-rails/selenium-on-rails/selenium-core/scripts/selenium-api.js