关于javascript：如何检索DOM元素的display属性？


How to retrieve the display property of a DOM element?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
    <style type="text/css">
        a {
            display: none;
        }
    </style>
    <body>
        <p id="p"> a paragraph </p>
        google
    </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);
   
</html>

第一个和第二个alert除了空字符串(我认为应该是none和block)外什么都没有显示。
但是，在进行故意的display设置之后，第三个alert最终会警告none。

但是为什么呢？如何正确检索display属性？

谢谢。

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

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

相关讨论

您需要元素的显示属性的计算值。您可以按以下方式获得它。请注意，大多数浏览器都支持window.getComputedStyle()，而IE中最接近的等效项是元素的currentStyle属性：

1
2
3
4
5
6
7
8
9
10
11
12
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);
}

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

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

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

如果可以使用jQuery，则有一种方法称为.is

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

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