用于检查元素是否可见、不显示,甚至不透明度水平的扩展功能

如果元素不可见, 它返回错误 。

function checkVisible(e) {
    if (!(e instanceof Element)) throw Error('not an Element');
    const elementStyle = getComputedStyle(e);
    if (elementStyle.display === 'none' || elementStyle.visibility !== 'visible' || elementStyle.opacity < 0.1) return false;
    if (e.offsetWidth + e.offsetHeight + e.getBoundingClientRect().height +
        e.getBoundingClientRect().width === 0) {
        return false;
    }
    const elemCenter   = {
        x: e.getBoundingClientRect().left + e.offsetWidth / 2,
        y: e.getBoundingClientRect().top + e.offsetHeight / 2
    };
    if (elemCenter.x < 0 || elemCenter.y < 0) return false;
    if (elemCenter.x > (document.documentElement.clientWidth || window.innerWidth)) return false;
    if (elemCenter.y > (document.documentElement.clientHeight || window.innerHeight)) return false;
    let pointContainer = document.elementFromPoint(elemCenter.x, elemCenter.y);
    do {
        if (pointContainer === e) return true;
    } while (pointContainer = pointContainer.parentNode);
    return false;
}

这些答案都没有涉及我所理解的问题, 也就是我正在寻找的问题, “我如何处理有可见度的项目:隐藏的?” 。 无论是: 可见的还是: 隐藏的, 都无法处理, 因为两者都在寻找文档中的显示。 据我所知, 没有选择器可以处理 cs 可见度。 这就是我是如何解决这个问题的( 标准拼写选择器, 可能有更压缩的语法 ) :

$(".item").each(function() {
    if ($(this).css("visibility") == "hidden") {
        // handle non visible state
    } else {
        // handle visible state
    }
});

isHidden = function(element){
    return (element.style.display === "none");
};

if(isHidden($("element")) == true){
    // Something
}

if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
    // 'element' is hidden
}

上述方法不考虑父(父)的可见度。 如果要也考虑母( 父) , 您应该使用 .is (“ 隐藏 ” ) 或.is ( “ 可见 ” ) 。

例如,

<div id="div1" style="display:none">
  <div id="div2" style="display:block">Div2</div>
</div>

上述方法将考虑在以下两种情况下显示可见的 div2 : 看不到 。 但上述方法在许多情况下可能有用, 特别是当您需要找到隐藏的父( 隐藏的父( 隐藏的父) 中是否存在错误时, 因为在这种情况下 : 可见的不会起作用 。

这是内部拼写如何解决这个问题的:

jQuery.expr.pseudos.visible = function( elem ) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

如果您不使用 jquery, 你可以只是利用这个代码 并把它变成你自己的功能:

function isVisible(elem) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

只要元素是可见的, 便会返回真实状态 。

您可以在可见时添加一个类。添加一个类,显示。然后检查是否有一个类:

$('#elementId').hasClass('show');

如果您有表演类, 它返回为真 。

添加这样的 cs :

.show{ display: block; }