Question

根据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

here表示有一种访问jQuery中隐藏/可见状态的特定方法，该方法在上面的示例中有效，但为not always appropriate。为什么getComputedStyle不能区分隐藏元素和非隐藏元素，从而在所有四行上生成inline-block而不是在输出末尾生成none？

Answer 1

之所以未呈现该元素，是因为该元素包含在display: none中，而不是则是因为它具有继承的值none该财产。

为什么对于父级隐藏的元素，getComputedStyle不返回display：none？

1 个答案: