使用jQuery检测元素是不是可见[重复]

Posted 2023-02-21

【中文标题】使用jQuery检测元素是不是可见[重复]

【英文标题】：Detect if an element is visible with jQuery [duplicate]使用jQuery检测元素是否可见[重复]

【发布时间】：2012-02-05 03:24:22

【问题描述】：

使用.fadeIn() 和.fadeOut()，我一直在我的页面上隐藏/显示一个元素，但有两个按钮，一个用于隐藏，一个用于显示。我现在想要一个按钮来切换both。

我的 HTML / JavaScript 原样：

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

function showTestElement() 
  $('#testElement').fadeIn('fast');


function hideTestElement() 
  $('#testElement').fadeOut('fast');

我想要的 HTML / JavaScript：

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

function toggleTestElement() 
  if (document.getElementById('testElement').***IS_VISIBLE***) 
    $('#testElement').fadeOut('fast');
   else 
    $('#testElement').fadeIn('fast');
  

如何检测元素是否可见？

【参考方案1】：

您正在寻找：

.is(':visible')

虽然考虑到你在其他地方使用它，但你可能应该将选择器更改为使用 jQuery：

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

需要注意的是，如果目标元素的任何一个父元素被隐藏，则子元素上的.is(':visible') 将返回false（这是有道理的）。

jQuery 3

:visible 以非常慢的选择器而闻名，因为它必须遍历 DOM 树来检查一堆元素。然而，对于 jQuery 3 来说有个好消息，正如 this post 解释的那样（Ctrl + F for :visible）：

感谢 Google 的 Paul Irish 所做的一些探索性工作，我们发现了一些情况，当在同一个文档中多次使用 :visible 等自定义选择器时，我们可以跳过大量额外工作。这种特殊情况现在快了 17 倍！

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

---

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

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

【讨论】：

你能用这个属性在元素变得可见时立即调用函数吗？

如果父项不可见，您知道这是否可行，因为从技术上讲，如果父项不可见，则元素不可见。

@Felipe 根据thise page ...如果浏览器报告的 offsetWidth 或 offsetHeight 大于 0，则元素可见。 This JSBin 表明，如果父项被隐藏，那么它的子项也会被隐藏

why jQuery 为什么yyy :( 如果您有数百个元素要检查每个滚动事件，这在性能方面不是很明智......直接的 JS 方法会更好。

@vsync 与其抱怨，不如发布一个支持 IE7 及更高版本的原生 javascript 解决方案。它比发布刻薄（尽管正确）的 cmets 更有帮助

【参考方案2】：

if($('#testElement').is(':visible'))
    //what you want to do when is visible

【参考方案3】：

没有必要，在元素上使用fadeToggle()即可：

$('#testElement').fadeToggle('fast');

Here's a demo.

【讨论】：

这是一个棘手的答案，其中问题清楚地问了一件事，但对于 OP 来说，最好的方法是另一件事。