javascript - 如何检查元素是否隐藏在 jQuery 中？

Question

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

你将如何测试一个元素是visibleor hidden？

Answer 1

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

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

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

它与twernt 的建议相同，但适用于单个元素；它与 jQuery FAQ 中推荐的算法相匹配。

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

Answer 2

您可以使用hidden选择器：

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

和visible选择器：

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

Answer 3

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

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

例如，

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

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

Answer 4

这些答案都没有解决我所理解的问题，这就是我一直在寻找的问题，“我如何处理有的物品visibility: hidden？” . 既:visible不会也:hidden不会处理这个问题，因为他们都在根据文档寻找显示。据我所知，没有选择器来处理 CSS 可见性。这是我解决它的方法（标准 jQuery 选择器，可能有更简洁的语法）：

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

Answer 5

从如何确定切换元素的状态？

---

:visible您可以使用and选择器确定元素是否折叠:hidden。

var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');

如果您只是根据其可见性对元素进行操作，则可以只在选择器表达式中包含:visible或:hidden。例如：

 $('#myDiv:visible').animate({left: '+=200px'}, 'slow');

Answer 6

通常在检查某些东西是否可见时，您会立即继续并用它做其他事情。jQuery 链接使这很容易。

因此，如果您有一个选择器，并且您希望仅在可见或隐藏时对其执行某些操作，您可以使用filter(":visible")或filter(":hidden")将其与您要执行的操作链接起来。

因此，不要if像这样声明：

if ($('#btnUpdate').is(":visible"))
{
     $('#btnUpdate').animate({ width: "toggle" });   // Hide button
}

或者更高效，但更丑陋：

var button = $('#btnUpdate');
if (button.is(":visible"))
{
     button.animate({ width: "toggle" });   // Hide button
}

您可以在一行中完成所有操作：

$('#btnUpdate').filter(":visible").animate({ width: "toggle" });

Answer 7

:visible根据jQuery 文档的选择器：

• 它们的 CSSdisplay值为none.
• 它们是带有type="hidden".
• 它们的宽度和高度明确设置为 0。
• 祖先元素是隐藏的，因此该元素不会显示在页面上。

带有visibility: hidden或的元素opacity: 0被认为是可见的，因为它们仍然占用布局中的空间。

这在某些情况下很有用，而在其他情况下则无用，因为如果您想检查元素是否可见（display != none），忽略父母的可见性，您会发现这样做.css("display") == 'none'不仅更快，而且还会正确返回可见性检查。

如果要检查可见性而不是显示，则应使用：.css("visibility") == "hidden"。

还要考虑额外的 jQuery 注释：

因为:visible是 jQuery 扩展而不是 CSS 规范的一部分，所以使用的查询:visible不能利用原生 DOMquerySelectorAll()方法提供的性能提升。要在使用:visibleto 选择元素时获得最佳性能，首先使用纯 CSS 选择器选择元素，然后使用.filter(":visible").

此外，如果您担心性能，您应该检查Now you see me... show/hide performance (2010-05-04)。并使用其他方法显示和隐藏元素。

Answer 8

元素可见性和 jQuery 是如何工作的；

可以使用或display:none隐藏元素。这些方法之间的区别：visibility:hiddenopacity:0

• display:none隐藏元素，不占用空间；
• visibility:hidden隐藏元素，但仍然占用布局空间；

• opacity:0将元素隐藏为“visibility:hidden”，在布局中仍然占用空间；唯一的区别是不透明度可以让一个元素部分透明；

  if ($('.target').is(':hidden')) {
    $('.target').show();
  } else {
    $('.target').hide();
  }
  if ($('.target').is(':visible')) {
    $('.target').hide();
  } else {
    $('.target').show();
  }
  
  if ($('.target-visibility').css('visibility') == 'hidden') {
    $('.target-visibility').css({
      visibility: "visible",
      display: ""
    });
  } else {
    $('.target-visibility').css({
      visibility: "hidden",
      display: ""
    });
  }
  
  if ($('.target-visibility').css('opacity') == "0") {
    $('.target-visibility').css({
      opacity: "1",
      display: ""
    });
  } else {
    $('.target-visibility').css({
      opacity: "0",
      display: ""
    });
  }
  

  有用的 jQuery 切换方法：

  $('.click').click(function() {
    $('.target').toggle();
  });
  
  $('.click').click(function() {
    $('.target').slideToggle();
  });
  
  $('.click').click(function() {
    $('.target').fadeToggle();
  });
  

Answer 9

这对我有用，我正在使用show()并使hide()我的 div 隐藏/可见：

if( $(this).css('display') == 'none' ){
    /* your code goes here */
} else {
    /* alternate logic   */
}

Answer 10

您也可以使用纯 JavaScript 执行此操作：

function isRendered(domObj) {
    if ((domObj.nodeType != 1) || (domObj == document.body)) {
        return true;
    }
    if (domObj.currentStyle && domObj.currentStyle["display"] != "none" && domObj.currentStyle["visibility"] != "hidden") {
        return isRendered(domObj.parentNode);
    } else if (window.getComputedStyle) {
        var cs = document.defaultView.getComputedStyle(domObj, null);
        if (cs.getPropertyValue("display") != "none" && cs.getPropertyValue("visibility") != "hidden") {
            return isRendered(domObj.parentNode);
        }
    }
    return false;
}

笔记：

1. 无处不在

2. 适用于嵌套元素

3. 适用于 CSS 和内联样式

4. 不需要框架

Answer 11

我会使用 CSS 类.hide { display: none!important; }。

对于隐藏/显示，我调用.addClass("hide")/.removeClass("hide"). 为了检查可见性，我使用.hasClass("hide").

如果您不打算使用.toggle()或方法，这是一种检查/隐藏/显示元素的简单明了的.animate()方法。

Answer 12

演示链接

$('#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" alt="" width="300"/>

来源（来自我的博客）：

Blogger 即插即用 - jQuery 工具和小部件：如何使用 jQuery 查看元素是隐藏还是可见

Answer 13

可以简单地使用hiddenorvisible属性，例如：

$('element:hidden')
$('element:visible')

或者您可以将其简化如下。

$(element).is(":visible")

Answer 14

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

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

Answer 15

您应该考虑的另一个答案是，如果您要隐藏一个元素，则应该使用jQuery，但不是实际隐藏它，而是删除整个元素，而是将其HTML内容和标签本身复制到 jQuery 变量中，然后您需要做的就是测试屏幕上是否有这样的标签，使用正常的if (!$('#thetagname').length).

Answer 16

在 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

Answer 17

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

Answer 18

$(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>

Answer 19

要检查它是否不可见，我使用!：

if ( !$('#book').is(':visible')) {
    alert('#book is not visible')
}

或者下面也是sam，将jQuery选择器保存在一个变量中，以便在多次需要时有更好的性能：

var $book = $('#book')

if(!$book.is(':visible')) {
    alert('#book is not visible')
}

Answer 20

使用类切换，而不是样式编辑。. .

使用为“隐藏”元素指定的类很容易，也是最有效的方法之一。使用“无”样式切换“隐藏”类Display将比直接编辑该样式执行得更快。我在 Stack Overflow 问题Turning two elements visible/hidden in the same div 中非常彻底地解释了其中的一些内容。

---

JavaScript 最佳实践和优化

以下是 Google 前端工程师 Nicholas Zakas 的 Google Tech Talk 视频：

• 加速你的 Javascript (YouTube)

Answer 21

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

测试（不支持 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 on a虚拟机）和 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

Answer 22

使用 adblocker 的可见检查的示例已激活：

$(document).ready(function(){
  if(!$("#ablockercheck").is(":visible"))
    $("#ablockermsg").text("Please disable adblocker.").show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ad-placement" id="ablockercheck"></div>
<div id="ablockermsg" style="display: none"></div>

“ablockercheck” 是 adblocker 阻止的 ID。因此，检查它是否可见，您可以检测广告拦截器是否已打开。

Answer 23

您需要同时检查...显示和可见性：

if ($(this).css("display") == "none" || $(this).css("visibility") == "hidden") {
    // The element is not visible
} else {
    // The element is visible
}

如果我们检查$(this).is(":visible")，jQuery 会自动检查这两个东西。

Answer 24

$(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>

Answer 25

只需通过检查布尔值来检查可见性，例如：

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

我为每个功能使用了这段代码。否则，您可以is(':visible')用于检查元素的可见性。

Answer 26

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

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

Answer 27

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

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

因此，还应考虑对 Stack Overflow 问题How to check if an element is off-screen 的回答。

Answer 28

可以创建一个函数来检查可见性/显示属性，以衡量元素是否显示在 UI 中。

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

工作小提琴

Answer 29

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

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

Answer 30

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

Answer 31

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

Answer 32

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

Answer 33

我搜索了这个，对于我的情况，没有一个答案是正确的，所以我创建了一个函数，如果一个人的眼睛看不到元素，它将返回 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;
    }
  }  
});

Answer 34

作为hide(),show()并将toggle()内联 css (display:none 或 display:block) 附加到元素。同样，我们可以很容易地使用三元运算符通过检查显示 CSS 来检查元素是隐藏还是可见。

更新：

• 您还需要检查元素 CSS 是否设置为可见性：“可见”或可见性：“隐藏”
• 如果显示属性设置为 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 或更多的属性，可以扩展此对象并为其添加更多属性并进行检查。

Answer 35

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

演示 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/阅读更多内容

Answer 36

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

Answer 37

这就是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

Answer 38

你可以使用这个：

$(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");
       }
    });
});

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

<p id="content">This is a Content</p>

<button id="toggle">Toggle Content Visibility</button>
<button id="visibility">Check Visibility</button>

Answer 39

我只是想澄清一下，在 jQuery 中，

元素可以被认为是隐藏的，原因如下：

• 它们的 CSS 显示值为 none。
• 它们是 type="hidden" 的表单元素。
• 它们的宽度和高度明确设置为 0。
• 祖先元素是隐藏的，因此该元素不会显示在页面上。

具有可见性的元素：隐藏或不透明度：0 被认为是可见的，因为它们仍然占用布局中的空间。在隐藏元素的动画期间，该元素被认为是可见的，直到动画结束。

来源：：隐藏选择器 | jQuery API 文档

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

Answer 40

这是检查标签是否可见的一些选项

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

Answer 41

您可以在可见时添加一个类。添加一个类，show. 然后检查它是否有一个类：

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

如果您有show课程，则返回 true。

像这样添加CSS：

.show{ display: block; }

Answer 42

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

API 文档：可见选择器

Answer 43

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 •如何检查元素是否在屏幕外 - 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

Answer 44

检查隐藏元素的方法太多了。这是最好的选择（我只是推荐你）：

使用 jQuery，在 CSS 中创建一个元素“display:none”以隐藏。

重点是：

$('element:visible')

以及一个使用示例：

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

Answer 45

只需检查display属性（或visibility取决于您喜欢哪种隐身）。例子：

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

Answer 46

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

$('element:hidden')

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

$('element:visible')

Answer 47

如果要检查一个元素是否在页面上可见，取决于其父元素的可见性，您可以检查元素的width和height是否都等于0。

jQuery

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

香草

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

或者

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

Answer 48

一个 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>

Answer 49

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

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

Answer 50

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

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

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

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

这是模型-视图-视图-模型的概述架构 (MVVM)

淘汰赛JS是一个绑定库，它可以让你在不学习整个框架的情况下尝试这些东西。

这里有一些 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 的可见性；它咨询视图模型。

Answer 51

if($("h1").is(":hidden")){
    // your code..
}

Answer 52

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

.show{ display :block; }

设置您的 jQuerytoggleClass()或addClass()或removeClass();.

举个例子，

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

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

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

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

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

Answer 53

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

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

Answer 54

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

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

Answer 55

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>

Answer 56

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

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

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

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

Answer 57

下面的代码检查一个元素在 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.");
                }
            });
        });

Answer 58

   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{

  }

Answer 59

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

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

或者

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

Answer 60

这个问题最简单的答案是这样的：

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

Answer 61

$('someElement').on('click', function(){ $('elementToToggle').is(':visible')

Answer 62

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

Answer 63

如果你隐藏在课堂上 - d-none

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

    }