我对检查元素是否具有 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>
谢谢，
【问题讨论】：
标签： javascript css
您正在为两种不同情况寻找一种解决方案。
第一个场景是获取 CSS 属性的级联/计算样式。请参阅this answer 了解如何执行此操作。
第二种情况是检测元素的任何父母是否被隐藏。这需要遍历，既麻烦又慢。
您可以采用outlined here 的解决方案（自1.3.2 起被 jQuery/Sizzle 采用），只需读取元素的尺寸：
var isVisible = element.offsetWidth > 0 || element.offsetHeight > 0;
如果它有尺寸，那么它是可见的，因为它占用了文档中的一些矩形空间（无论多么小）。请注意，对于某些浏览器中的某些元素，此技术仍然有 some downsides，但在大多数情况下应该可以工作。
【讨论】：
这是确定元素是否可见的最快捷、最简单的方法。
function is_visible(e) {return e.offsetWidth > 0 || e.offsetHeight > 0;}
【讨论】：
每个案例都需要自己的检查，并且您需要知道该元素的 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")
【讨论】：
上述解决方案适合这种“隐形”场景：
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() 测试不适合许多“不可见”场景（但是我认为可以增强测试以包含这些）。以下是几个例子：
关于上面的 computedStyle() 函数，可能还需要注意以下几点：
【讨论】：
这是你想要做的吗？
function SomeClass()
{
if (document.getElementById("MY_DIV_ID").style.display == "none")
{
}
}
【讨论】：