如何使元素的可见度.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. 不需要框架

其他回答

这些答案都没有涉及我所理解的问题,这就是我所寻求的,"我如何处理那些visibility: hidden?"两者都不是:visible:hidden将处理此事宜, 因为他们都在查找文档中的显示。 就我所能确定的情况来看, 没有选择器可以处理 CSS 可见度 。 以下是我如何解决这个问题的( 标准 jQuery 选择器, 可能有更压缩的语法 ) :

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

发自我如何确定混合元素的状态?


您可以通过使用:visible:hidden选择器。

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

如果你只是根据它的能见度 依据一个元素行事 你可以包括:visible:hidden在选择表达式中。例如:

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

缩略: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)。并使用其他方法显示和隐藏元素。

您需要同时检查 显示和可见度 :

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

如果我们检查$(this).is(":visible"),j 查询自动检查这两个东西。

通常当检查某物是否可见时, 您会立即直接去做其他事情。 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" });