如何检查jQuery中是否隐藏了一个元素？

只需通过检查布尔值来检查可见性,例如:

if (this.hidden === false) {
    // Your code
}

我为每个函数使用了这个代码.否则,您可以使用它is(':visible')来检查元素的可见性.

因为Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout(如jQuery:可见选择器所述) - 我们可以通过这种方式检查元素是否真的可见:

function isElementReallyHidden (el) {
    return $(el).is(":hidden") || $(el).css("visibility") == "hidden" || $(el).css('opacity') == 0;
}

var booElementReallyShowed = !isElementReallyHidden(someEl);
$(someEl).parents().each(function () {
    if (isElementReallyHidden(this)) {
        booElementReallyShowed = false;
    }
});

但是如果元素的CSS如下所示呢？

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

所以这个Stack Overflow问题的答案也应该考虑如何检查元素是否在屏幕外.

这里还有一个三元条件表达式来检查元素的状态,然后切换它:

$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });

if($('#postcode_div').is(':visible')) {
    if($('#postcode_text').val()=='') {
        $('#spanPost').text('\u00a0');
    } else {
        $('#spanPost').text($('#postcode_text').val());
}

可以创建函数以检查可见性/显示属性,以便衡量元素是否在UI中显示.

function checkUIElementVisible(element) {
    return ((element.css('display') !== 'none') && (element.css('visibility') !== 'hidden'));
}

工作小提琴

.is(":not(':hidden')") /*if shown*/

if($('#id_element').is(":visible")){
   alert('shown');
}else{
   alert('hidden');
}

我搜索了这个,并没有一个答案对我的情况是正确的,所以我创建了一个函数,如果一个人的眼睛看不到元素,它将返回false

jQuery.fn.extend({
  isvisible: function() {
    //
    //  This function call this: $("div").isvisible()
    //  Return true if the element is visible
    //  Return false if the element is not visible for our eyes
    //
    if ( $(this).css('display') == 'none' ){
        console.log("this = " + "display:none");
        return false;
    }
    else if( $(this).css('visibility') == 'hidden' ){
        console.log("this = " + "visibility:hidden");   
        return false;
    }
    else if( $(this).css('opacity') == '0' ){
        console.log("this = " + "opacity:0");
        return false;
    }   
    else{
        console.log("this = " + "Is Visible");
        return true;
    }
  }  
});

作为hide(),show()并将toggle()内联css(display:none或display:block)附加到元素.同样,我们可以通过检查显示css轻松使用三元运算符来检查天气元素是隐藏还是可见.

更新:

您还需要检查元素css是否设置为可见性:"可见"或可见性:"隐藏"

如果显示属性设置为inline-block,block,flex,则元素也将可见.

所以我们可以检查元素的属性,使其不可见.所以他们是display: none和visibility: "hidden";

我们可以创建一个对象来检查负责隐藏元素的属性:

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

如果key的element属性与hidden属性值匹配,我们可以通过循环遍历对象匹配中的每个键值来检查.

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

如果要检查元素高度:0或宽度:0或更多的属性,可以扩展此对象并向其添加更多属性并进行检查.

谢谢@Krzysztof Przygoda提醒我其他展示属性.

只需检查该元素是否可见并且它将返回一个布尔值,jQuery通过向元素添加display none来隐藏元素,因此如果您想使用纯JavaScript,您仍然可以这样做,例如:

if (document.getElementById("element").style.display === 'block') { 
  // your element is visible, do whatever you'd like
}

此外,您可以使用jQuery,因为您可以使用其他代码,并且您拥有较小的代码块,如下面的jQuery,为您执行相同的跟踪:

if ($(element).is(":visible")) { 
    // your element is visible, do whatever you'd like
};

在jQuery中使用css方法也可以产生同样的结果:

if ($(element).css('display')==='block') {
    // your element is visible, do whatever you'd like
}

在检查可见性和显示的情况下,您可以执行以下操作:

if ($(this).css("display")==="block"||$(this).css("visibility")==="visible") {
   // your element is visible, do whatever you'd like
}

这就是jQuery在内部解决这个问题的方法:

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

这isVisible将返回true只要该元素是可见的.

有很多方法可以检查元素在jQuery中是可见还是隐藏.

演示HTML以供参考

Content
Content2

使用可见性过滤器选择器$('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/

你可以用这个:

$(element).is(':visible');

示例代码

$(document).ready(function()
{
    $("#toggle").click(function()
    {
        $("#content").toggle();
    });

    $("#visiblity").click(function()
    {
       if( $('#content').is(':visible') )
       {
          alert("visible"); // Put your code for visibility
       }
       else
       {
          alert("hidden");
       }
    });
});

This is a Content

Toggle Content Visibility
Check Visibility

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

 // using a pure CSS selector  
   if ($('p:visible')) {  
      alert('Paragraphs are visible (checked using a CSS selector) !');  
   };  
  
   // using jQuery's is() method  
   if ($('p').is(':visible')) {  
      alert('Paragraphs are visible (checked using is() method)!');  
   };  
  
   // using jQuery's filter() method  
   if ($('p').filter(':visible')) {  
      alert('Paragraphs are visible (checked using filter() method)!');  
   };  
  
   // you can use :hidden instead of :visible to reverse the logic and check if an element is hidden  
   // if ($('p:hidden')) {  
   //    do something  
   // };  

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

.show{ display: block; }

$('element:visible')

$('element:visible').show();

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

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

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

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