如果您想要检查页面上是否可见某个元素, 取决于其父的可见度, 您可以检查是否width和height本要素的数值均等于0.

jj 查询

$element.width() === 0 && $element.height() === 0

香草香草

element.clientWidth === 0 && element.clientHeight === 0

或

element.offsetWidth === 0 && element.offsetHeight === 0

简单检查display属性(或)visibility取决于您喜欢何种隐形。例如:

if ($('#invisible').css('display') == 'none') {
    // This means the HTML element with ID 'invisible' has its 'display' attribute set to 'none'
}

您可以使用 jQuery 的is()函数可以检查选定元素的可见或隐藏。该方法沿 DOM 元素沿 DOM 元素绕行查找匹配,以找到符合已传递参数的匹配。如果匹配返回错误,则返回为真实。

<script>
    ($("#myelement").is(":visible"))? alert("#myelement is visible") : alert("#myelement is hidden");
</script>

if($(element).is(":visible")) {
  console.log('element is visible');
} else {
  console.log('element is not visible');
}

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

它返回时返回false如果元素不可见。

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;
}

1 支查解决办法

确定元素在 jQuery 中是否可见的方法

<script>
if ($("#myelement").is(":visible")){alert ("#myelement is visible");}
if ($("#myelement").is(":hidden")){alert ("#myelement is hidden"); }
</script>

全部环圈可见可见div id 'maylement' 元素的孩子:

$("#myelement div:visible").each( function() {
 //Do something
});

在jQuery的源头钻探

这就是jQuery如何执行这个功能:

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

2 • 如何检查元素是否在屏幕外 - CSS

使用元素. getBoundingClientRect () 您可以很容易地检测到您的元素是否在您视图的边界之内( 屏幕上或屏幕下) :

jQuery.expr.filters.offscreen = function(el) {
  var rect = el.getBoundingClientRect();
  return (
           (rect.x + rect.width) < 0 
             || (rect.y + rect.height) < 0
             || (rect.x > window.innerWidth || rect.y > window.innerHeight)
         );
};

然后,你可以以几种方式使用:

// Returns all elements that are offscreen
$(':offscreen');

// Boolean returned if element is offscreen
$('div').is(':offscreen');

如果使用角,请检查:不要使用与角的隐藏属性