如何使用JavaScript检查元素是否真的可见？
这个问题在这里已经有了答案：
对于第2点。
我发现没有人建议使用document.elementFromPoint(x,y) ，对我来说这是测试一个元素是否被另一个元素嵌套或隐藏的最快方法。 您可以将目标元素的偏移量传递给函数。
这里是elementFromPoint上的PPK测试页面。
我不知道这些在较老的或不太现代的浏览器中支持多少，但是我正在使用类似的东西（没有任何库的需求）：
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;
};
不知道性能:)
正如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
链接地址: http://www.djcxy.com/p/14623.html上一篇: How do I check if an element is really visible with JavaScript?