如何通过javascript检查元素的可见性？
[英]How to check element's visibility via javascript?
问题描述
我对检查一个元素是否显示的方式感兴趣：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>
谢谢，
5 个解决方案
解决方案1
25 已采纳 2009-08-27 19:35:48
您正在寻找两种不同方案的解决方案。
第一种情况是获取css属性的级联/计算样式。 请参阅此答案以了解如何执行此操作。
第二种情况是检测是否隐藏了任何元素的父项 。 这需要遍历并且繁琐且缓慢。
您可以采用此处概述的解决方案（并从1.3.2开始采用jQuery / Sizzle），并阅读元素的维度：
var isVisible = element.offsetWidth > 0 || element.offsetHeight > 0;
如果它具有尺寸，那么它在文档中占据一些矩形空间（无论多小）的意义上是可见的。 请注意，对于某些浏览器中的某些元素，此技术仍有一些缺点 ，但在大多数情况下应该可以使用。
解决方案2
5 2009-08-27 19:50:02
这是确定元素是否可见的最快捷，最简单的方法。 它甚至是jQuery如何做到的。
function isVisible(elem) {
return elem.offsetWidth > 0 || elem.offsetHeight > 0;
}
解决方案3
1 2009-08-27 19:52:14
每个案例都需要自己检查，你需要知道该元素的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")
解决方案4
0 2015-09-06 23:37:02
上述解决方案迎合了这种“隐形”场景：
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（）函数，也值得注意以下几点：
- 除了测试可见性之外，它当然可以用于许多其他风格相关的目的
- 我选择忽略：由于不完整的浏览器支持而进行伪样式测试，但是如果需要，可以对函数进行微小修改。
解决方案5
-1 2009-08-27 19:19:47
这是你想要做的吗？
function SomeClass()
{
if (document.getElementById("MY_DIV_ID").style.display == "none")
{
}
}
如何独立于父可见性（jQuery与否）检查元素可见性
[英]How to check element visibility independent of parent visibility (jQuery or not)
如何使用 JavaScript 检查另一个元素内是否有一个元素
[英]How to check if there's an element inside another element with JavaScript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.