如何检查jQuery中是否隐藏了元素？

但是，如果元素的CSS如下所示怎么办？

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

因此，也应考虑对堆栈溢出问题的此答案，即如何检查元素是否在屏幕外。

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

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

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

激活了对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。因此，检查它是否可见，便可以检测到adblocker是否已打开。

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

使用为“隐藏”元素指定的类很容易，也是最有效的方法之一。将Display样式“隐藏”的类切换为“无”样式将比直接编辑该样式更快。我在“堆栈溢出”问题中相当详尽地解释了其中的一些问题，即在同一个div中将两个元素可见/隐藏。

JavaScript最佳做法和优化

这是由Google前端工程师Nicholas Zakas进行的Google技术讲座的真正启发性视频：

• 加快您的Javascript（YouTube）

这可能起作用：

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

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

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

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

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

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

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

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

这些答案都没有解决我所理解的问题，即我正在寻找的问题：“我该如何处理有物品visibility: hidden？” 。无论是:visible还是:hidden会处理这个问题，因为他们都在寻找每个文档显示。据我所确定，没有选择器可以处理CSS可见性。这是我的解决方法（标准jQuery选择器，可能会有更简洁的语法）：

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

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

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

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

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

We use jQuery is() to check the selected element with another element, selector or any jQuery object. This method traverses along the DOM elements to find a match, which satisfies the passed parameter. It will return true if there is a match otherwise returns false.