如何通过javascript检查元素的可见性？

Question

如何通过javascript检查元素的可见性？

19

我想知道一种方法来检查一个元素是否具有显式的display:none属性（即style="display:none"），或者它的类具有（或继承了）这个样式，或者它的父元素被隐藏（并且我的元素继承了这个属性）。

情况1：

<body><div><span style="display:none;">Some hidden text</span></div>

或者

<body><div style="display:none;"><span>Some hidden text</span></div>

情况2：

SomeClass {   display:none;   }
<body><div class="SomeClass"><span>Some hidden text</span></div>

谢谢。

- Haytham

5个回答

6

这是确定元素是否可见的最快、最简单的方法。

function is_visible(e) {return e.offsetWidth > 0 || e.offsetHeight > 0;}

- Josh Stodola

3

每个案例都需要进行单独的检查，您需要知道该元素的ID。首先，获取该元素（仅为使代码可读性）：

var MyElementName = document.getElementById("MyElementName");

那么请您做以下检查： 情况1：

 if (MyElementName.style.display == "none")

案例2，查看父级元素，首先检查 FF：

if ((MyElementName.previousSibling.nodeType == 3 )
    && (MyElementName.parentNode.nextSibling.style.display == "none"))

然后对于其他浏览器：

else (MyElementName.parentNode.style.display == "none")

案例三，查找应用的CSS类：

if (MyElementName.className = "SomeClass")

- Andrew Magill

1

上述解决方案适用于这种“隐形”情况:

display:none;

但它不适用于这一个：

visibility: hidden;

为了包含 visibility: hidden; 的测试，可以修改脚本如下...

首先，创建一个跨浏览器兼容的函数以获取所需元素的计算样式：

computedStyle = function(vElement) {
  return window.getComputedStyle?
         ?window.getComputedStyle(vElement,null)
         :vElement.currentStyle;                    //IE 8 and less
}

其次，创建函数以测试可见性。

isVisible = function(vElement) {
  return !(vElement.offsetWidth == 0 && vElement.offsetHeight == 0)
         && computedStyle(vElement).visibility != "hidden";  
}

最后，只需在需要的地方按以下方式引用isVisible函数即可：

if (isVisible(myElement)) {
  alert('You can see me!');
} else {
  alert('I am invisible ha ha!');
}

请注意，当前的isVisible()测试并不考虑一些“不可见”情况（但是我想这些测试可以增强以包括这些情况）。以下是一些示例：

当元素与周围颜色相同时
当元素可见但在另一个元素后面时，例如具有不同的z-index值

还值得注意的是上述computedStyle()函数的以下内容：

它当然可以用于除测试可见性外的许多其他样式相关目的
我选择忽略:pseudo样式测试，因为浏览器支持不完全，但如果需要，可以通过对函数进行轻微修改来包含它们。

- Pancho

-1

你是想要做这个吗？

function SomeClass()
{
  if (document.getElementById("MY_DIV_ID").style.display == "none")
  {

  }
}

- Mark

我认为这不是他想要的...我认为他想要一种检查它是否由类设置或者是否在内联中完成的方法，这种方式只有在内联完成时才有效。 - Zoidberg

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Crescent Fresh · Accepted Answer

你正在寻找两种不同情况的解决方案。

第一种情况是获取CSS属性的级联/计算样式。请参见此答案了解如何执行此操作。

第二种情况是检测元素的任何父级是否隐藏。这需要遍历，而且很麻烦和慢。

您可以采用此处概述（并被jQuery/Sizzle自1.3.2以来使用），只需读取元素的尺寸即可。

var isVisible = element.offsetWidth > 0 || element.offsetHeight > 0;

如果它有尺寸，那么从文档的角度来看，它是可见的，因为它占用一些矩形空间（无论多小）。请注意，在某些浏览器中，这种技术对于某些元素仍存在一些缺点，但在大多数情况下应该可以使用。