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

JavaScript

神无神乐

2020-03-09

是否有可能切换元素的可见性,使用功能.hide().show().toggle()

你会如何测试一个元素是否visible还是hidden

第133篇《如何检查jQuery中是否隐藏了元素?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

11个回答
小卤蛋卡卡西 2020.03.09

但是,如果元素的CSS如下所示怎么办?

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

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

猪猪十三 2020.03.09

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

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

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

村村老丝 2020.03.09

激活了对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是否已打开。

Jim老丝梅 2020.03.09

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

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


JavaScript最佳做法和优化

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

JinJinDavaid卡卡西 2020.03.09

这可能起作用:

expect($("#message_div").css("display")).toBe("none");
A十三 2020.03.09

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

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

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

达蒙武藏 2020.03.09

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

理查德Stafan 2020.03.09

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

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

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

LEY逆天Near 2020.03.09

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

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

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

// 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.

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android