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

如果一个元素是visiblehidden?


当前回答

您可以在显示时添加一个类。添加一个类,show。然后检查它有一个类:

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

如果有的话它返回为真show类。

添加像这样的 CSS :

.show{ display: block; }

其他回答

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

$('element:hidden')

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

$('element:visible')

因为Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout(截至2004年12月1日jj 查询: 可见选择器- 我们可以检查元素是否真的以这种方式可见:

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

您应该考虑的另一个答案是,如果您隐藏了一个元素,您应该使用jj 查询,但实际上没有隐藏它,而是删除了整个元素,但复制了它HTML HTML输入 jQuery 变量,然后您只需要测试屏幕上是否有这样的标记,然后使用普通if (!$('#thetagname').length).

但如果元素的 CSS 和下面一样呢?

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

Stack 溢出问题的此答案如何检查元素是否在屏幕外还应加以考虑。

Demo 链接

$('#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"/>

来源(来自我的博客):

博客 Plug n Play - jQuery 工具及部件: 如何使用 jQuery 查看元素是否隐藏或可见 ?