毕竟,没有一个例子适合我, 所以我写了我自己的。

测试( 不支持互联网探索过滤器: alpha) :

a) 检查文档是否隐藏

b) 检查元素是否为零宽度/高度/不透明或显示:无/可见度:内嵌样式中隐藏

c) 检查元素的中心(也因为它比测试每个像素/角的速度快)是否被其他元素(和所有祖先,例如:溢出:隐藏/滚动/一个元素在另一个元素之上)或屏幕边缘所隐藏

d) 检查元素是否为零宽度/高度/不透明或显示:无/可见度:以计算样式隐藏(在所有祖先中)

测试在

和机器人4.4(本地浏览器/铬/火狐)、火狐(风窗/摩克)、铬(风窗/摩克)、歌剧(风窗预示/摩克 Webkit)、互联网探索者(互联网探索者5-11文档模式+虚拟机器上的互联网探索者8)和Safari(风窗/摩克/奥兹)。

var is_visible = (function () {
    var x = window.pageXOffset ? window.pageXOffset + window.innerWidth - 1 : 0,
        y = window.pageYOffset ? window.pageYOffset + window.innerHeight - 1 : 0,
        relative = !!((!x && !y) || !document.elementFromPoint(x, y));
        function inside(child, parent) {
            while(child){
                if (child === parent) return true;
                child = child.parentNode;
            }
        return false;
    };
    return function (elem) {
        if (
            document.hidden ||
            elem.offsetWidth==0 ||
            elem.offsetHeight==0 ||
            elem.style.visibility=='hidden' ||
            elem.style.display=='none' ||
            elem.style.opacity===0
        ) return false;
        var rect = elem.getBoundingClientRect();
        if (relative) {
            if (!inside(document.elementFromPoint(rect.left + elem.offsetWidth/2, rect.top + elem.offsetHeight/2),elem)) return false;
        } else if (
            !inside(document.elementFromPoint(rect.left + elem.offsetWidth/2 + window.pageXOffset, rect.top + elem.offsetHeight/2 + window.pageYOffset), elem) ||
            (
                rect.top + elem.offsetHeight/2 < 0 ||
                rect.left + elem.offsetWidth/2 < 0 ||
                rect.bottom - elem.offsetHeight/2 > (window.innerHeight || document.documentElement.clientHeight) ||
                rect.right - elem.offsetWidth/2 > (window.innerWidth || document.documentElement.clientWidth)
            )
        ) return false;
        if (window.getComputedStyle || elem.currentStyle) {
            var el = elem,
                comp = null;
            while (el) {
                if (el === document) {break;} else if(!el.parentNode) return false;
                comp = window.getComputedStyle ? window.getComputedStyle(el, null) : el.currentStyle;
                if (comp && (comp.visibility=='hidden' || comp.display == 'none' || (typeof comp.opacity !=='undefined' && comp.opacity != 1))) return false;
                el = el.parentNode;
            }
        }
        return true;
    }
})();

如何使用 :

is_visible(elem) // boolean

您可以使用隐藏选择器:

// Matches all elements that are hidden
$('element:hidden')

可见选择器 :

// Matches all elements that are visible
$('element:visible')

通常当检查某物是否可见时, 您会立即直接去做其他事情。 jquery 绑链很容易做到 。

所以,如果您有一个选择器, 并且您想要在它上执行某些动作, 只有当它为可见或隐藏时, 您可以使用过滤器 (“ : 可见 ” ) 或过滤器 (“ 隐藏 ” ) , 然后将它与您想要采取的行动连接起来 。

而不是这样声明:

if ($('#btnUpdate').is(":visible"))
{
     $('#btnUpdate').animate({ width: "toggle" });   // Hide button
}

或效率更高,但更丑陋:

var button = $('#btnUpdate');
if (button.is(":visible"))
{
     button.animate({ width: "toggle" });   // Hide button
}

您可以在一条线内完成全部任务:

$('#btnUpdate').filter(":visible").animate({ width: "toggle" });

您需要检查... 显示和可见度 :

if ($(this).css("display") == "none" || $(this).css("visibility") == "hidden") {
    // The element is not visible
} else {
    // The element is visible
}

如果我们自动检查$( thiss) 。 is (“: 可见”) , jquery check for both the things 自动检查 。

但如果元素的 css 和下面一样呢?

.element{
    position: absolute;left:-9999;    
}

因此,对于堆叠溢出问题的答案是,如何检查元素是否在屏幕之外,也应当考虑。

i 将使用 cs 类. hide { 显示: 无重要;} 。

对于隐藏/显示, 我调用. addclass (" hide") /. remove class (" hide") /. remove class (" hide") 来检查可见度, 我使用. has class (" hide" ) 。

如果您不打算使用.toggle () 或. animate () 方法, 这是一个简单明了的检查/ 隐藏/ 显示元素的方法 。