检测元素是否可见 [英] Detect if an element is visible

问题描述

使用 .fadeIn（）和 .fadeOut（），我一直隐藏/显示我的元素页面，但有两个按钮，一个用于隐藏，一个用于显示。我现在想要一个按钮来切换两者。因此，我的问题是如何检测元素是否可见？

Using .fadeIn() and .fadeOut(), I have been hiding/showing an element on my page, but with two buttons, one for hide and one for show. I now want to have one button to toggle both. Therefore, my question is how do I detect if the element is visible or not?

我的HTML原样：

<a onclick="showTestElement()">Show</a>
<a onclick="hideTestElement()">Hide</a>

我的JS原样：

<script>
    function showTestElement(){
        $('#testElement').fadeIn('fast');
    }

    function hideTestElement(){
        $('#testElement').fadeOut('fast');
    }
</script>

我希望拥有我的HTML：

My HTML as I would like to have it:

<a onclick="toggleTestElement()">Show/Hide</a>

我想拥有它的JS，虽然纯粹的jQuery会很好：

My JS as I would like to have it, although pure jQuery would be nice:

<script>
    function toggleTestElement(){
        if (document.getElementById('testElement').***IS_VISIBLE***) {
            $('#testElement').fadeOut('fast');
        }
        else{
            $('#testElement').fadeIn('fast');
        }
    }
</script>

感激不尽的任何帮助..

Any help gratefully received..

推荐答案

您正在寻找：

.is(':visible')

虽然您应该更改您的选择器以使用jQuery，因为您仍然在其他地方使用它：

Although you should probably change your selector to use jQuery considering you're using it in other places anyway:

if($('#testElement').is(':visible')) {
    // Code
}

重要的是要注意，如果隐藏了任何一个目标元素的父元素，然后孩子的 .is（'：visible'）将返回 false （这是有意义的）。

It is important to note that if any one of a target element's parent elements are hidden, then .is(':visible') on the child will return false (which makes sense).

：可见因其存在而闻名相当慢的选择器，因为它必须遍历DOM树检查一堆元素。然而，jQuery 3的好消息是这篇文章解释了（ Ctrl + F ：可见）：

:visible has had a reputation for being quite a slow selector as it has to traverse up the DOM tree inspecting a bunch of elements. There's good news for jQuery 3, however, as this post explains (Ctrl + F for :visible):

感谢Paul Irish在谷歌的一些侦探工作，我们发现了一些我们可以跳过一堆额外工作的情况。自定义选择器如：可见在同一文档中多次使用。特殊情况现在快了17倍！

Thanks to some detective work by Paul Irish at Google, we identified some cases where we could skip a bunch of extra work when custom selectors like :visible are used many times in the same document. That particular case is up to 17 times faster now!

请记住，即使有了这种改进，选择器如：visible和：hidden也可能很昂贵，因为它们依赖于浏览器确定元素是否实际显示在页面上。在最坏的情况下，这可能需要完全重新计算CSS样式和页面布局！虽然我们在大多数情况下不鼓励使用它们，但我们建议您测试页面以确定这些选择器是否会导致性能问题。

Keep in mind that even with this improvement, selectors like :visible and :hidden can be expensive because they depend on the browser to determine whether elements are actually displaying on the page. That may require, in the worst case, a complete recalculation of CSS styles and page layout! While we don’t discourage their use in most cases, we recommend testing your pages to determine if these selectors are causing performance issues.

---

进一步扩展到您的特定用例，有一个内置的jQuery函数，名为 $。fadeToggle（） ：

function toggleTestElement() {
    $('#testElement').fadeToggle('fast');
}

这篇关于检测元素是否可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！