关于javascript：如何检查jquery中是否隐藏了元素？


How do I check if an element is hidden in jQuery?

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

如何测试元素是可见的还是隐藏的？

相关讨论

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

1
2
3
4
5
// Checks css for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible");

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

与twernt的建议相同，但应用于单个元素；它与jquery常见问题解答中推荐的算法相匹配

相关讨论

您可以使用hidden选择器：

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

和visible选择器：

1
2
// Matches all elements that are visible
$('element:visible')
相关讨论

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

上面的方法不考虑父级的可见性。为了考虑家长，您应该使用.is(":hidden")或.is(":visible")。

例如，

1
  Div2

The above method will consider div2 visible while :visible not. But the above might be useful in many cases, especially when you need to find if there is any error divs visible in the hidden parent because in such conditions :visible will not work.

相关讨论

这些答案中没有一个能解决我所理解的问题，这就是我在寻找的问题，"我该如何处理含有visibility: hidden的物品？".:visible和:hidden都不会处理这个问题，因为它们都在根据文档寻找显示。据我所知，没有处理CSS可见性的选择器。以下是我如何解析它(标准jquery选择器，可能有更简明的语法)：

1
2
3
4
5
6
7
$(".item").each(function() {
    if ($(this).css("visibility") =="hidden") {
        // handle non visible state
    } else {
        // handle visible state
    }
});
相关讨论

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

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

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

如果您只是根据元素的可见性来处理它，那么您只需在选择器表达式中包含:visible或:hidden。例如：

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

通常，当检查某个东西是否可见时，您将立即进行，并用它做其他事情。jQuery链接使这变得容易。

因此，如果您有一个选择器，并且只想在可见或隐藏的情况下对它执行一些操作，那么您可以使用filter(":visible")或filter(":hidden")，然后将它与您要执行的操作链接起来。

因此，不是像这样的if声明：

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

或者更有效，但更丑：

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

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

1
$('#btnUpdate').filter(":visible").animate({ width:"toggle" });
相关讨论

根据jquery文档，:visible选择器：

  • They have a CSS display value of none.
  • They are form elements with type="hidden".
  • Their width and height are explicitly set to 0.
  • An ancestor element is hidden, so the element is not shown on the page.

Elements with visibility: hidden or opacity: 0 are considered to be visible, since they still consume space in the layout.

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

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

还应考虑其他jquery注释：

Because :visible is a jQuery extension and not part of the CSS specification, queries using :visible cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :visible to select elements, first select the elements using a pure CSS selector, then use .filter(":visible").

此外，如果您关心性能，您应该检查现在看到我…显示/隐藏性能(2010-05-04)。并使用其他方法来显示和隐藏元素。

这对我有效，我使用show()和hide()使我的DIV隐藏/可见：

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

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

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

  • display:none隐藏元素，不占用任何空间；
  • visibility:hidden隐藏了元素，但它仍然占用了布局中的空间；

  • opacity:0将元素隐藏为"visibility:hidden"，但它仍然占用布局中的空间；唯一的区别是不透明度使元素部分透明；

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    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切换方法：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    $('.click').click(function() {
      $('.target').toggle();
    });

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

    $('.click').click(function() {
      $('.target').fadeToggle();
    });
相关讨论

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

为了隐藏/展示，我打电话给.addClass("hide")/.removeClass("hide")。为了检查可见性，我使用.hasClass("hide")。

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

相关讨论

您也可以使用普通的javascript：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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;
}

笔记：

  • 无处不在

  • 适用于嵌套元素

  • 适用于CSS和内嵌样式

  • 不需要框架

    • 相关讨论

    可以简单地使用hidden或visible属性，例如：

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

    或者您可以用下面的方法简化这个过程。

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

    演示链接

    1
    2
    3
    4
    5
    6
    $('#clickme').click(function() {
      $('#book').toggle('slow', function() {
        // Animation complete.
        alert($('#book').is(":visible")); //<--- TRUE if Visible False if Hidden
      });
    });
    1
    2
    3
    4
    5
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

      Click here

    <img id="book" src="http://www.chromefusion.com/wp-content/uploads/2012/06/chrome-logo.jpg" alt="" />

    来源：

    blogger plug n play-jquery工具和小部件：如何使用jquery查看元素是隐藏的还是可见的

    相关讨论

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

    1
    2
    3
    4
    5
    $(document).ready(function(){
        $("#eb").click(function(){
            $("#ebdiv").toggle();
        });    
    });

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

    在jquery中针对:hidden选择器测试元素时，应该认为绝对定位元素可以被识别为隐藏的，尽管它们的子元素是可见的。

    乍一看，这似乎有点违反直觉——尽管仔细查看jquery文档可以获得相关信息：

    Elements can be considered hidden for several reasons: [...] Their width and height are explicitly set to 0. [...]

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

    请看下面的示例：

    1
    2
    console.log($('.foo').is(':hidden')); // true
    console.log($('.bar').is(':hidden')); // false
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    .foo {
      position: absolute;
      left: 10px;
      top: 10px;
      background: #ff0000;
    }

    .bar {
      position: absolute;
      left: 10px;
      top: 10px;
      width: 20px;
      height: 20px;
      background: #0000ff;
    }
    1
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

    jquery 3.x的更新：

    使用jquery 3，所描述的行为将发生变化！如果元素有任何布局框，包括零宽度和/或零高度的布局框，则它们将被视为可见。

    jquery 3.0.0-alpha1的修改：

    http://jsfiddle.net/pm2q3/7/

    然后，相同的JS将具有此输出：

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

    这可能起作用：

    1
    expect($("#message_div").css("display")).toBe("none");
    相关讨论

    例子：

    1
    2
    3
    4
    5
    $(document).ready(function() {
      if ($("#checkme:hidden").length) {
        console.log('Hidden');
      }
    });
    1
    2
    3
    4
    5
    6
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

      <span class="itemlist"><!-- Shows Results for Fish --></span> Category:Fish
      Product: Salmon Atlantic
      Specie: Salmo salar
      Form: Steaks

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

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

    或者以下也是SAM，将jquery选择器保存在变量中，以便在多次需要时获得更好的性能：

    1
    2
    3
    4
    5
    var $book = $('#book')

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

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

    使用为"隐藏"元素指定的类很容易，也是最有效的方法之一。使用Display样式"none"切换类"hidden"比直接编辑该样式执行得更快。我很彻底地解释了一些堆栈溢出问题，使两个元素在同一个分区中可见/隐藏。

    javascript最佳实践和优化

    以下是谷歌前端工程师尼古拉斯·扎卡斯(Nicholas Zakas)的一段关于谷歌技术对话的真正启发性视频：

    • 加速你的javascript(YouTube)

    启用AdBlocker的可见检查示例：

    1
    2
    3
    4
    $(document).ready(function(){
      if(!$("#ablockercheck").is(":visible"))
        $("#ablockermsg").text("Please disable adblocker.").show();
    });
    1
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

    "ablockercheck"是adblocker阻止的ID。因此，检查它是否可见，您可以检测是否打开了adblocker。

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

    测试(不支持Internet Explorer filter:alpha：

    a)检查文档是否隐藏

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

    c)检查元素的中心(也因为它比测试每个像素/角速度快)是否未被其他元素(以及所有祖先元素，例如：overflow:hidden/scroll/one element over enother)或屏幕边缘隐藏。

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

    在测试

    Android 4.4(本机浏览器/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)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    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;
        }
    })();

    如何使用：

    1
    is_visible(elem) // boolean

    你需要检查两个…显示和可见性：

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

    如果我们检查$(this).is(":visible")，jquery会自动检查这两种情况。

    也许你可以这样做

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    $(document).ready(function() {
       var visible = $('#tElement').is(':visible');

       if(visible) {
          alert("visible");
                        // Code
       }
       else
       {
          alert("hidden");
       }
    });
    1
    2
    3
    <script src="https://code.jquery.com/jquery-1.10.2.js">

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

    只需检查布尔值即可检查可见性，如：

    1
    2
    3
    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:visible selector中所述)，我们可以检查元素是否真的以这种方式可见：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    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如下所示呢？

    1
    2
    3
    .element{
        position: absolute;left:-9999;    
    }

    所以这个关于栈溢出问题的答案，如何检查一个元素是否在屏幕之外，也应该被考虑。

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

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

    工作小提琴

    1
    2
    3
    4
    5
    6
    if($('#postcode_div').is(':visible')) {
        if($('#postcode_text').val()=='') {
            $('#spanPost').text('\u00a0');
        } else {
            $('#spanPost').text($('#postcode_text').val());
    }

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

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

    1
    .is(":not(':hidden')") /*if shown*/
    相关讨论

    1
    2
    3
    4
    5
    if($('#id_element').is(":visible")){
       alert('shown');
    }else{
       alert('hidden');
    }

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    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;
        }
      }  
    });
    相关讨论

    只需检查该元素是否可见并返回一个布尔值，jquery通过向元素添加display none来隐藏元素，因此如果要使用纯javascript，您仍然可以这样做，例如：

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

    另外，您也可以像其他代码一样使用jquery，并且您有更小的代码块，类似下面jquery中的代码块，为您执行相同的跟踪：

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

    同样，在jquery中使用css方法也会产生相同的结果：

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

    此外，如果要检查可见性和显示，可以执行以下操作：

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

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

    演示HTML示例参考

    1
    2
    Content
    Content2

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

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

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

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

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

    Read more at http://api.jquery.com/category/selectors/visibility-filter-selectors/

    使用is()过滤

    1
    2
    3
    4
    5
    6
    7
        Example:
           $('#content').is(":visible").css('color', '#EEE');

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

    Read more at http://api.jquery.com/is/

    这就是jquery内部解决此问题的方法：

    1
    2
    3
    jQuery.expr.pseudos.visible = function( elem ) {
        return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
    };

    如果不使用jquery，只需利用此代码并将其转换为您自己的函数：

    1
    2
    3
    function isVisible(elem) {
        return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
    };

    只要元素可见，isVisible将返回true。

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

    更新：

    • 还需要检查元素css是否设置为visibility:"visible"或visibility:"hidden"
    • 如果display属性设置为inline block、block、flex，元素也将可见。

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

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

    1
    2
    3
    4
    var hiddenCssProps = {
    display:"none",
    visibility:"hidden"
    }

    我们可以通过循环遍历对象匹配中的每个键值来检查键的元素属性是否与隐藏的属性值匹配。

    1
    2
    3
    4
    5
    6
    var isHidden = false;
    for(key in hiddenCssProps) {
      if($('#element').css(key) == hiddenCssProps[key]) {
         isHidden = true;
       }
    }

    如果要检查诸如"元素高度：0"或"宽度：0"等属性，可以扩展此对象并向其添加更多属性，然后可以进行检查。

    感谢@krzysztof prlygoda提醒我其他显示属性。

    相关讨论

    您可以使用：

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

    示例代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    $(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");
           }
        });
    });
    1
    2
    3
    4
    5
    6
    7
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">

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

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

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

    Elements can be considered hidden for several reasons:

    • They have a CSS display value of none.
    • They are form elements with type="hidden".
    • Their width and height are explicitly set to 0.
    • An ancestor element is hidden, so the element is not shown on the page.

    Elements with visibility: hidden or opacity: 0 are considered to be visible, since they still consume space in the layout. During animations that hide an element, the element is considered to be visible until the end of the animation.

    Source: :hidden Selector | jQuery API Documentation

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
     // 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  
       // };

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

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

    如果您有show类，则返回true。

    像这样添加CSS：

    1
    .show{ display: block; }

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

    Using jQuery, make an element,"display:none", in CSS for hidden.

    重点是：

    1
    $('element:visible')

    以及使用示例：

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

    只需检查display属性(或visibility属性)，这取决于您喜欢什么样的不可见性。例子：

    1
    2
    3
    if ($('#invisible').css('display') == 'none') {
        // This means the HTML element with ID 'invisible' has its 'display' attribute set to 'none'
    }
    1？jQuery解决方案确定元素在jquery中是否可见的方法

    1
    2
    if ($("#myelement").is(":visible")){alert ("#myelement is visible");}
    if ($("#myelement").is(":hidden")){alert ("#myelement is hidden"); }

    循环ID为"myelement"的元素的所有可见的DIV子级：

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

    窥视jquery的来源

    jquery就是这样实现这个特性的：

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

    2？如何检查元素是否在屏幕外-css

    使用element.getboundingclientrect()可以轻松检测元素是否在视区的边界内(即屏幕上或屏幕外)：

    1
    2
    3
    4
    5
    6
    7
    8
    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)
             );
    };

    然后您可以通过几种方式使用它：

    1
    2
    3
    4
    5
    // returns all elements that are offscreen
    $(':offscreen');

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

    如果使用角度，请检查：不要使用带有角度的隐藏属性

    你可以使用

    1
    2
    3
    4
    5
    6
    $("div:visible" ).click(function() {
      $( this ).css("background","yellow" );
    });
    $("button" ).click(function() {
      $("div:hidden" ).show("fast" );
    });

    API文档：https://api.jquery.com/visible-selector/

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

    有时，如果您想检查元素是否在页面上可见，根据其参数的可见性，可以检查元素的width和height是否都等于0。

    JQuery

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

    香草

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

    或

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

    公平地说，这个问题早于这个答案的日期。我补充说，这不是批评行动，而是帮助任何人仍然问这个问题。

    确定某个对象是否可见的正确方法是查阅视图模型。如果你不知道这意味着什么，那么你就要开始一段探索之旅，这将大大降低你的工作难度。

    下面是模型视图视图模型体系结构(MVVM)的概述。

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

    这里有一些JS和一个可能可见或不可见的DIV。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <html><body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js">

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

    Peekaboo!
    <button data-bind="click: toggle">Toggle the div's visibility</button>
    </body></html>

    请注意，toggle函数不通过查询DOM来确定DIV的可见性，而是查询视图模型。

    相关讨论

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

    当CSS类可见或隐藏时，可以通过切换该类来使用它。

    1
    .show{ display :block; }

    设置jquery toggleClass()或addClass()或removeClass();。

    作为一个例子，

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

    上述代码将在元素没有show类时添加showcss类，在元素有show类时删除。

    当您检查它是否可见时，您可以遵循这个jquery代码，

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

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

    您可以这样做：

    1
    2
    3
    4
    5
    6
    7
    isHidden = function(element){
        return (element.style.display ==="none");
    };

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

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

    1
    2
    3
    4
    5
    $('div').each(function(){
      if($(this).css('display') === 'none'){
        $(this).css({'display':'block'});
      }
    });

    也可以在输入端使用它：

    1
    2
    3
    4
    5
    $('input').each(function(){
      if($(this).attr('type') === 'hidden'){
        $(this).attr('type', 'text');
      }
    });

    jquery的解决方案，相当古老的问题，但我仍然觉得我可以给那些想更改按钮文本的人一个更好的答案。

    1
    2
    3
    4
    5
    6
    7
    8
    $(function(){
      $("#showHide").click(function(){
        var btn = $(this);
        $("#content").toggle(function () {
          btn.text($(this).css("display") === 'none' ?"Show" :"Hide");
        });
       });
     });
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

    <button id="showHide">Hide</button>

      Some content
      <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>