logo标签列表

如何获取DOM元素的display属性？

javascriptcssdom
21
<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属性？

谢谢。

4个回答
42

.style.* 属性直接映射到 style 属性，而不是应用的样式。如果需要应用的样式，则需要使用getComputedStyle。

建议使用 .className 进行切换，并将表示和逻辑分开。

1
样式不应被称为属性，它是一个对象。每个DOM元素节点都有一个样式属性。这个属性是一个对象。HTML样式属性用于向表示HTML元素的DOM节点的样式属性添加属性。一旦HTML代码被解析，我们就不再拥有HTML属性，而是拥有对象属性。 - Šime Vidas
2
@Šime Vidas：我认为如果您重新阅读David的回答，您会意识到他已经正确区分了这一点。 - T.J. Crowder
1
@jcyang: DOM 中元素上的 style 对象用于更改应用于该特定元素的样式，就像标记中的 style 属性一样。如果想要修改样式表中的样式定义，则可以这样做，只是在别处：https://developer.mozilla.org/En/DOM/Stylesheet - T.J. Crowder
@Šime Vidas："一旦HTML代码被解析，我们就不再具有HTML属性，而是拥有了对象属性。"实际上，这些属性成为DOM属性--具体来说是attribute nodes。正确的术语是，style对象上的这些属性反映“style”属性（正如className反映“class”属性）。 - T.J. Crowder
现代代码中应使用 classList.toggle，而非 className。 - Sebastian Simon
显示剩余6条评论
8
你需要获取元素的显示属性的计算值。你可以按以下方式获取。请注意，大多数浏览器支持 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);
}
4
我建议使用JavaScript库来获取计算样式。例如，使用jQuery可以使用css()方法检索计算样式...
$("#a").css("display");

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

0
如果您可以使用jQuery，那么有一个叫做.is的方法。
要检查某个东西是否未显示，我会这样做... $('someSelector').is(':visible') ...
如果显示属性设置为None，则会返回false。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接