根据这个问题 https://stackoverflow.com/q/1169967/798371页面和接受的答案here https://stackoverflow.com/q/4866229/798371，通过Javascript获取继承的CSS值的正确方法是getComputedStyle() https://developer.mozilla.org/en-US/docs/Web/API/Window/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 https://stackoverflow.com/a/178450/798371，这在上面的示例中有效，但是并不总是合适的 https://stackoverflow.com/questions/4866229/check-element-css-display-with-javascript#comment5408516_4866277。为什么 getCompatedStyle 不区分隐藏和非隐藏元素，产生inline-block在所有四行而不是none在输出的末尾？
该元素不会被渲染，因为它包含在display: none, not因为它有遗传价值none对于该财产。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
