如何检查元素是不是隐藏在 jQuery 中？

Posted 2023-02-21

【中文标题】如何检查元素是不是隐藏在 jQuery 中？

【英文标题】：How do I check if an element is hidden in jQuery?如何检查元素是否隐藏在 jQuery 中？

【发布时间】：2010-09-15 18:04:25

【问题描述】：

是否可以使用函数.hide()、.show() 或.toggle() 来切换元素的可见性？

如何测试一个元素是visible 还是hidden？

【问题讨论】：

值得一提（即使经过这么长时间），$(element).is(":visible") 适用于 jQuery 1.4.4，但不适用于 jQuery 1.3.2，在 Internet Explorer 8 下。这可以使用Tsvetomir Tsonev's helpful test snippet 进行测试。只要记住改变jQuery的版本，在每一个下测试。

这是相关的，尽管问题不同：***.com/questions/17425543/…

如果您对隐藏虚拟 css 元素不感兴趣，但对用户在“视口区域”中的物理可见性不感兴趣，请考虑查看 ***.com/questions/487073/… 和 ***.com/questions/123999/…

【参考方案1】：

如果你隐藏类 - d-none

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

    


  

【参考方案2】：

有两种方法可以检查元素的可见性。

if($('.selector').is(':visible'))
    // element is visible
else
    // element is visible

或

if($('.selector:visible'))
    // element is visible
else
    // element is visible

【参考方案3】：

expect($("#message_div").css("display")).toBe("none");

【参考方案4】：

$(document).ready(function() 
  if ($("#checkme:hidden").length) 
    console.log('Hidden');
  
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="checkme" class="product" style="display:none">
  <span class="itemlist"><!-- Shows Results for Fish --></span> Category:Fish
  <br>Product: Salmon Atlantic
  <br>Specie: Salmo salar
  <br>Form: Steaks
</div>

【参考方案5】：

$(document).ready(function() 
   var visible = $('#tElement').is(':visible');

   if(visible) 
      alert("visible");
                    // Code
   
   else
   
      alert("hidden");
   
);

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<input type="text" id="tElement" style="display:block;">Firstname</input>

【参考方案6】：

$( "div:visible" ).click(function() 
  $( this ).css( "background", "yellow" );
);
$( "button" ).click(function() 
  $( "div:hidden" ).show( "fast" );
);

API 文档：visible Selector

【参考方案7】：

content.style.display != 'none'

function toggle() 
  $(content).toggle();
  let visible= content.style.display != 'none'
  console.log('visible:', visible);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button onclick="toggle()">Show/hide</button>
<div id="content">ABC</div>

【参考方案8】：

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

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

【参考方案9】：

   hideShow()
  $("#accordionZiarat").hide();
  // Checks CSS content for display:[none|block], ignores visibility:[true|false]
  if ($("#accordionZiarat").is(":visible")) 
    $("#accordionZiarat").hide();
  

  
  else if ($("#accordionZiarat").is(":hidden")) 
    $("#accordionZiarat").show();
  

  else

  

【参考方案10】：

由于问题涉及单个元素，因此此代码可能更合适：

// Checks CSS content for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible");

// The same works with hidden
$(element).is(":hidden");

与twernt's suggestion相同，但应用于单个元素；和它matches the algorithm recommended in the jQuery FAQ。

我们使用 jQuery 的 is() 来检查选定的元素与另一个元素、选择器或任何 jQuery 对象。此方法遍历 DOM 元素以找到满足传递参数的匹配项。如果匹配则返回true，否则返回false。

【讨论】：

这个解决方案似乎会鼓励visible=false 和display:none 的混淆；而 Mote 的解决方案清楚地说明了编码人员检查display:none 的意图； （通过提及隐藏和显示哪个控件display:none 而不是visible=true）

没错，但正如 chiborg 所指出的，:visible 也会检查父元素是否可见。

你说得有道理 - 我会明确表示代码只检查 display 属性。鉴于最初的问题是针对show() 和hide()，并且他们设置了display，我的回答是正确的。顺便说一句，它确实适用于 IE7，这是一个测试 sn-p - jsfiddle.net/MWZss ;

其实我发现逆向逻辑的话更好：!$('selector').is(':hidden');因为某些原因。值得一试。

这是一个针对正则表达式的简单基准测试 is():jsperf.com/jquery-is-vs-regexp-for-css-visibility。结论：如果您不追求性能，请在 is() 上使用正则表达式（因为 is() 在查看实际元素之前先查找所有隐藏节点）。

【参考方案11】：

Demo Link

$('#clickme').click(function() 
  $('#book').toggle('slow', function() 
    // Animation complete.
    alert($('#book').is(":visible")); //<--- TRUE if Visible False if Hidden
  );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clickme">
  Click here
</div>
<img id="book" src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png"  />

来源（来自我的博客）：

Blogger Plug n Play - jQuery Tools and Widgets: How to See if Element is hidden or Visible Using jQuery

【讨论】：

@Adrew 但此链接显示此功能的工作示例。我认为一个实用的答案可能会超过一整页的文字:)

【参考方案12】：

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

【参考方案13】：

使用隐藏选择可以匹配所有隐藏元素

$('element:hidden')

使用可见选择可以匹配所有可见元素

$('element:visible')

【参考方案14】：

检查元素是否可见、不显示甚至不透明度级别的扩展功能

如果元素不可见，则返回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;

【参考方案15】：

作为hide()、show() 和toggle() 将内联css（显示：无或显示：块）附加到元素。 同样，我们可以很容易地使用三元运算符通过检查显示CSS来检查元素是隐藏还是可见。

更新：

您还需要检查元素 CSS 是否设置为可见性：“可见”或可见性：“隐藏” 如果 display 属性设置为 inline-block、block、flex，该元素也将可见。

所以我们可以检查一个元素的属性，使其不可见。所以他们是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 或更多的属性，您可以扩展此对象并为其添加更多属性并进行检查。

【参考方案16】：

下面的代码检查一个元素在 jQuery 中是隐藏的还是可见的

// You can also do this...

        $("button").click(function()
            // show hide paragraph on button click
            $("p").toggle("slow", function()
                // check paragraph once toggle effect is completed
                if($("p").is(":visible"))
                    alert("The paragraph  is visible.");
                 else
                    alert("The paragraph  is hidden.");
                
            );
        );

【参考方案17】：

您可以使用 jQuery 的is() 函数来检查所选元素的可见或隐藏。该方法遍历 DOM 元素以找到满足传递参数的匹配项。如果有匹配则返回true，否则返回false。

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

【参考方案18】：

1 • jQuery 解决方案

判断一个元素在jQuery中是否可见的方法

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

在id为'myelement'的元素的所有可见 div子元素上循环：

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

浏览 jQuery 源码

这是 jQuery 实现此功能的方式：

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

2 • How to check if an element is off-screen - CSS

使用 Element.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');

如果您使用 Angular，请检查：Don’t use hidden attribute with Angular

【参考方案19】：

一个 jQuery 解决方案，但对于那些想要更改按钮文本的人来说，它仍然更好：

$(function()
  $("#showHide").click(function()
    var btn = $(this);
    $("#content").toggle(function () 
      btn.text($(this).css("display") === 'none' ? "Show" : "Hide");
    );
   );
 );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="showHide">Hide</button>
<div id="content">
  <h2>Some content</h2>
  <p>
  What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
  </p>
</div>

【参考方案20】：

不要为每个element 写一个event，而是这样做：

$('div').each(function()
  if($(this).css('display') === 'none')
    $(this).css('display':'block');
  
);

你也可以在输入上使用它：

$('input').each(function()
  if($(this).attr('type') === 'hidden')
    $(this).attr('type', 'text');
  
);

【参考方案21】：

您可以通过切换类来使用可见或隐藏的 CSS 类：

.show display :block; 

设置您的 jQuery toggleClass() 或 addClass() 或 removeClass();。

举个例子

jQuery('#myID').toggleClass('show')

上面的代码会在元素没有show时添加showcss类，当元素有show类时将删除。

当你检查它是否可见时，你可以按照这个 jQuery 代码，

jQuery('#myID').hasClass('show');

当#myID 元素有我们的类 (show) 时，上面的代码将返回一个布尔值 (true)，当它没有 (show) 类时返回一个 false。

【参考方案22】：

只需检查display 属性（或visibility，具体取决于您喜欢哪种隐形）。示例：

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

【参考方案23】：

只需检查该元素是否可见，它将返回一个布尔值。 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

【参考方案24】：

公平地说，这个问题早于这个答案。

我添加它不是为了批评 OP，而是为了帮助任何仍在问这个问题的人。

确定某物是否可见的正确方法是咨询您的视图模型；

如果您不知道这意味着什么，那么您即将踏上探索之旅，这将使您的工作变得更加轻松。

以下是model-view-view-model 架构 (MVVM) 的概述。

KnockoutJS 是一个绑定库，可让您在不学习整个框架的情况下尝试这些东西。

这里有一些 JavaScript 代码和一个可能可见也可能不可见的 DIV。

<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<script>
    var vm = 
        IsDivVisible: ko.observable(true);
    
    vm.toggle = function(data, event) 
      // Get current visibility state for the div
      var x = IsDivVisible();
      // Set it to the opposite
      IsDivVisible(!x);
    
    ko.applyBinding(vm);
</script>
<div data-bind="visible: IsDivVisible">Peekaboo!</div>
<button data-bind="click: toggle">Toggle the div's visibility</button>
</body>
</html>

请注意，toggle 函数不会参考 DOM 来确定 div 的可见性；它咨询视图模型。

【参考方案25】：

在 jQuery 中针对:hidden 选择器测试元素时，应考虑绝对定位元素可能被识别为隐藏，尽管其子元素可见。

首先，这似乎有点违反直觉——尽管仔细查看 jQuery 文档会得到相关信息：

元素可以被认为是隐藏的，原因如下：[...]它们的宽度和高度被明确设置为 0。[...]

所以这对于盒子模型和元素的计算样式来说实际上是有意义的。即使宽度和高度没有显式设置为0，它们也可以隐式设置。

看看下面的例子：

console.log($('.foo').is(':hidden')); // true
console.log($('.bar').is(':hidden')); // false

.foo 
  position: absolute;
  left: 10px;
  top: 10px;
  background: #ff0000;


.bar 
  position: absolute;
  left: 10px;
  top: 10px;
  width: 20px;
  height: 20px;
  background: #0000ff;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo">
  <div class="bar"></div>
</div>

---

jQuery 3.x 更新：

使用 jQuery 3，所描述的行为将会改变！如果元素具有任何布局框，包括零宽度和/或高度的布局框，则元素将被视为可见。

JSFiddle 与 jQuery 3.0.0-alpha1：

http://jsfiddle.net/pM2q3/7/

相同的 JavaScript 代码将具有以下输出：

console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false

【参考方案26】：

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

测试（不支持 Internet Explorer filter:alpha）：

a) 检查文档是否未被隐藏

b) 检查元素是否具有零宽度/高度/不透明度或内联样式中的display:none/visibility:hidden

c）检查元素的中心（也因为它比测试每个像素/角更快）是否没有被其他元素（以及所有祖先，例如：overflow:hidden/滚动/一个元素覆盖另一个元素）或屏幕隐藏边缘

d) 检查元素是否具有零宽度/高度/不透明度或display:none/可见性：隐藏在计算样式中（在所有祖先中）

测试于

android 4.4 (Native browser/Chrome/Firefox), Firefox (Windows/Mac), Chrome (Windows/Mac), Opera (Windows Presto/Mac WebKit), Internet Explorer (Internet Explorer 5-11 文档模式 +虚拟机上的 Internet Explorer 8）和 Safari（Windows/Mac/ios）。

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

【参考方案27】：

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

上述方法没有考虑父级的可见性。还要考虑父母，您应该使用.is(":hidden") 或.is(":visible")。

例如，

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

上述方法将认为div2 可见，而:visible 不可见。但是上面的方法在很多情况下可能很有用，尤其是当您需要查找隐藏的父级中是否有任何可见的错误 div 时，因为在这种情况下:visible 将不起作用。

【讨论】：

这仅检查单个元素的显示属性。 :visible 属性还检查父元素的可见性。

这是在使用 IE 8 进行测试时唯一对我有用的解决方案。

@chiborg 是的，但有时这正是你想要的，我不得不学习如何“聪明”的 jQuery...

这确实回答了这个问题，因为问题是关于单个元素并且通过使用 hide()、show() 和 toggle() 函数，但是，正如大多数人已经说过的那样，我们应该使用:visible 和 :hidden 伪类。

当元素存在但当前不在页面上时可以使用此答案，例如在detach()之后。

【参考方案28】：

如果你想检查一个元素在页面上是否可见，根据其父元素的可见性，你可以检查元素的width和height是否都等于0。

jQuery

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

香草

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

或者

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

【参考方案29】：

ebdiv 应设置为 style="display:none;"。它适用于显示和隐藏：

$(document).ready(function()
    $("#eb").click(function()
        $("#ebdiv").toggle();
    );    
);

【参考方案30】：

您可以使用hidden 选择器：

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

还有visible 选择器：

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

【讨论】：

请注意，本演示文稿中有一些与性能相关的良好提示：addyosmani.com/jqprovenperformance

在第 21 到 28 页上，它显示了 :hidden 或 :visible 与其他选择器相比有多慢。感谢您指出这一点。

当您处理几个元素并且几乎没有发生任何事情时 - 即大多数情况下的荒谬 - 时间问题是一个可笑的次要问题。哦，不！它花了 42 毫秒而不是 19 毫秒！！！

我正在使用此选择器手动切换元素。 $('element:hidden') 对我来说总是正确的！

@cwingrav 您可能需要重新阅读文档， :hidden 适用于所有元素。带有type="hidden" 的表单元素只是可以触发:hidden 的一种情况。没有高度和宽度的元素、带有display: none 的元素以及具有隐藏祖先的元素也将被视为:hidden。