Question

<html>
    <style type="text/css">
        a {
            display: none;
        }
    </style>
    <body>
        <p id="p"> a paragraph </p>
        <a href="http://www.google.com" id="a">google</a>
    </body>
    <script type="text/javascript">
        var a = (document.getElementById('a')).style;
        alert(a.display);
        var p = (document.getElementById('p')).style;
        alert(p.display);
        p.display = 'none';
        alert(p.display);
    </script>
</html>

第一个和第二个alert只显示一个空字符串，我认为应该是none和block。但是，在内涵display设置后，第三个alert最终提醒none。

但为什么？我怎样才能正确检索display属性？

感谢。

Answer 1

.style.*属性直接映射到style 属性，而不是映射到应用的样式。为此你需要getComputedStyle。

我会认真考虑切换.className并将演示文稿与逻辑完全分开。

Answer 2

您需要元素的display属性的计算值。您可以按如下方式获得此信息。请注意，大多数浏览器支持window.getComputedStyle()，而IE中最接近的等价物是元素的currentStyle属性：

var el = document.getElementById('a');
var styleObj;

if (typeof window.getComputedStyle != "undefined") {
    styleObj = window.getComputedStyle(el, null);
} else if (el.currentStyle != "undefined") {
    styleObj = el.currentStyle;
}

if (styleObj) {
   alert(styleObj.display);
}

Answer 3

我建议使用JavaScript库来获取计算样式。例如，使用jQuery，您可以使用css（）方法检索计算样式...

$("#a").css("display");

css（）方法是一种跨浏览器的解决方案，因为它在内部使用样式对象以及getComputedStyle方法和currentStyle对象。

Answer 4

如果你可以使用jQuery，那么有一个名为.is

的方法

要检查某些内容是否未显示，我会... $('someSelector').is(':visible') ...

如果display属性设置为None，则返回false。

如何检索DOM元素的显示属性？

4 个答案: