根据 this question页面和接受的答案 here ，通过 Javascript 获取继承的 CSS 值的正确方法是 getComputedStyle() .但是，这在以下示例中不起作用:
<!DOCTYPE html>
<html lang="en">
<body>
<form id="iterateThroughMe">
<div class="notHidden"><input name="myNum" type="number" /></div>
<div><input name="myOtherNum" type="number" /></div>
<input name="myText" type="text" />
<div id="hider" style="display: none;">
<input name="hiddenElement" type="number" />
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var inputs = $("#iterateThroughMe").find('input');
for(var i = 0; i<inputs.length; i++) {
var displayStyle = window.getComputedStyle(inputs[i], null).display;
console.log(
(($(inputs[i]).is(":hidden"))?"in":"")+
"visible element: ",inputs[i],"has display style",displayStyle);
}
</script>
</body>
</html>
保存并在浏览器中打开，控制台上可见如下内容:
visible element: <input name="myNum" type="number"> has display style inline-block
visible element: <input name="myOtherNum" type="number"> has display style inline-block
visible element: <input name="myText" type="text"> has display style inline-block
invisible element: <input name="hiddenElement" type="number"> has display style inline-block
在 jQuery 中有一种访问隐藏/可见状态的特定方法，已注明 here ，在上面的示例中有效，但为 not always appropriate .为什么 getComputedStyle 不区分隐藏元素和非隐藏元素，在所有四行上生成 inline-block 而不是在输出末尾生成 none？
最佳答案
该元素未被渲染，因为它包含在 display: none 中。 ，不是因为它继承值none为那个属性(property)。
关于javascript - 为什么getComputedStyle不返回显示:none for an element hidden by a parent?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56692450/