如何使元素的可见度.hide(), .show(),或.toggle()?

如果一个元素是visiblehidden?


当前回答

您也可以使用 plain 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. 不需要框架

其他回答

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

您可以在显示或隐藏 CSS 类时使用该类的 CSS 类 :

.show{ display :block; }

设置您的j查询toggleClass()addClass()removeClass();.

例如,

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

上述代码将添加show当元素没有 cs 元素时 cs 类show当它消逝的时候,show类。

当你在检查它是否可见, 你可以遵循这个 JQuery 代码,

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

上面的代码将返回布尔值( true) 时返回布尔值#myID元素中含有我们的类(show当它没有的时候,是假的,show类。

缩略:visible根据j 查询文档:

  • 他们有一个CSSdisplay价值的数值none.
  • 它们是构成元素的构成元素,type="hidden".
  • 它们的宽度和高度明确定为0。
  • 隐藏了祖先元素,所以该元素不在页面上显示。

具有下列要素的要件要件:visibility: hiddenopacity: 0认为是可见的,因为它们仍在布局中消耗空间。

在某些情况中,这有用,而在另一些情况中则无用,因为如果你想检查该元素是否可见(如果您想检查该元素是否可见) 。display != none无视家长的能见度 你会发现.css("display") == 'none'不仅速度更快,而且还会正确返回可见度检查。

如果您要检查可见度而不是显示, 您应该使用 :.css("visibility") == "hidden".

也考虑到附加 jQuery 注释:

因为:visible是 jQuery 扩展名,不属于 CSS 规格的一部分,使用:visible无法利用本地DOM提供的绩效提升querySelectorAll()方法。在使用:visible选择元素,首先使用纯 CSS 选择器选择元素,然后使用.filter(":visible").

而且,如果你对工作表现很关心,你应该检查一下现在你看到我... 表现/隐藏表现(2010-05-04)。并使用其他方法显示和隐藏元素。

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

如何如何元素可见度和jQuery 工作;

元素可以隐藏display:none, visibility:hiddenopacity:0这些方法之间的差异:

  • display:none隐藏元素,且不占用任何空间;
  • visibility:hidden隐藏元素,但它在布局中仍然占据空间;
  • opacity:0将元素隐藏为“ 可见性: 隐藏” , 它仍然占载着布局的空间; 唯一的区别在于不透明让一个元素部分透明;

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