Question

我对检查元素是否显示的方式感兴趣：none style explicility（即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>

谢谢，

Answer 1

您正在寻找两种不同场景的解决方案。

第一种情况是获取css属性的级联/计算样式。有关如何执行此操作，请参阅this answer。

第二种情况是检测是否隐藏了任何元素的父母。这需要遍历并且繁琐且缓慢。

您可以采用解决方案outlined here（自1.3.2以来由jQuery / Sizzle使用），并阅读元素的维度：

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

如果它有尺寸，则它在文档中占据一些矩形空间（无论多小）的意义上是可见的。请注意，对于某些浏览器中的某些元素，此技术仍然具有some downsides，但在大多数情况下都应该有效。

Answer 2

这是确定元素是否可见的最快捷，最简单的方法。它甚至是jQuery如何做到的。

function isVisible(elem) {
  return elem.offsetWidth > 0 || elem.offsetHeight > 0;
}

Answer 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")

案例3 ，寻找应用的css类：

if (MyElementName.className = "SomeClass")

Answer 4

上述解决方案迎合了这种“隐形”情景：

display:none;

但它不适合这个：

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指数值

关于上面的computedStyle（）函数，也值得注意以下几点：

除了测试可见性之外，它当然可以用于许多其他与风格相关的目的
我选择忽略：由于浏览器支持不完整而进行的伪样式测试，但如果需要对功能进行微小修改，可以将其包括在内。

Answer 5

这是你想要做的吗？

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

  }
}

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

5 个答案: