有很多方法可以检查元素是否可见或隐藏在 jQuery 中。

Demo HTML 例如引用

<div id="content">Content</div>
<div id="content2" style="display:none">Content2</div>

使用可见性过滤过滤器选择器$('element:hidden')或$('element:visible')

• $('element:hidden'):选择隐藏的所有元素。

  Example:
     $('#content2:hidden').show();
  

• $('element:visible'):选择可见的所有元素。

  Example:
     $('#content:visible').css('color', '#EEE');
  

更多信息http://api.jquery.com/category/selectors/visibility-filter-selectors/

使用使用is()过滤过滤

    Example:
       $('#content').is(":visible").css('color', '#EEE');

    Or checking condition
    if ($('#content').is(":visible")) {
         // Perform action
    }

更多信息http://api.jquery.com/is/

我只是想澄清,在jQuery,

某些要素可被视为隐藏,原因如下:

• 它们有一个 CSS 显示值, 没有任何值 。
• 它们组成元素 类型 = "隐藏" 。
• 它们的宽度和高度明确定为0。
• 隐藏了祖先元素,所以该元素不在页面上显示。

具有可见度的要素: 隐藏或不透明: 0 被视为可见, 因为它们仍然在布局中消耗空间 。 在隐藏元素的动画中, 该元素被视为可见, 直到动画结束 。

资料来源:隐藏选择器 jQuery API 文件

if($('.element').is(':hidden')) {
  // Do something
}

如果隐藏在类 - d - no 类中

if (!$('#ele').hasClass('d-none')) {
        $('#ele').addClass('d-none'); //hide 

    }


  

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

jj 查询

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

香草香草

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

或

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

原为:hide(), show()和toggle()内嵌 cs (display:none 或 显示: block) 到元素。 同样, 我们也可以很容易地使用永久运算符来检查元素是否隐藏或可见, 检查显示 CSS 。

更新:

• 您还需要检查元素 CSS 设置为可见度: “ 可见” 或“ 隐蔽” 。
• 如果显示属性被设置为内嵌区块、区块、弹性,则该元素也将是可见的。

这样我们就可以检查一个元素的属性, 使得它隐形。 所以它们是display: none和visibility: "hidden";

我们可以创建一个用于检查对隐藏元素负责的财产的物件:

var hiddenCssProps = {
display: "none",
visibility: "hidden"
}

我们可以通过在对象匹配中环绕每个关键值来检查密钥的元素属性是否与隐藏的属性值匹配 。

var isHidden = false;
for(key in hiddenCssProps) {
  if($('#element').css(key) == hiddenCssProps[key]) {
     isHidden = true;
   }
}

如果您想要检查像元素高度: 0 或宽度: 0 或以上这样的属性, 您可以扩展此对象, 并添加更多属性, 并且可以检查 。

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');

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