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

IT技术 javascript css dom
2021-01-14 06:36:11 
<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显示一个空字符串，我认为应该是noneand block。然而经过刻意的display设定，第三个人alert终于警觉起来none。

但为什么？我怎样才能display正确检索财产？

谢谢。

4个回答

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

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

@David Dorward：感谢您的帮助。那么style属性不能反映CSS样式的实时变化有什么用呢？
2021-03-19 06:36:11
style 属性存在于 HTML 解析之前。一旦页面被解析，就没有样式属性了。样式对象可能会被操作，然后它将不再“映射”到 HTML 源代码的原始样式属性。
2021-03-22 06:36:11
样式不应称为属性。它是一个对象。每个 DOM 元素节点都有一个 style 属性。该属性是一个对象。... HTML 样式属性用于向表示 HTML 元素的 DOM 节点的样式属性添加属性。一旦解析了 HTML 代码，我们就不再有 HTML 属性，而是对象属性。
2021-03-28 06:36:11
@jcyang：styleDOM 中元素上的对象用于更改应用于该特定元素的样式，就像style标记中的属性一样。如果你想修改样式表中的样式定义，你可以这样做，它只是在别处：developer.mozilla.org/En/DOM/Stylesheet
2021-03-29 06:36:11
@Šime Vidas：我想如果你重新阅读大卫的回答，你会意识到他正确地区分了这种区别。
2021-04-08 06:36:11

您需要元素的显示属性的计算值。您可以按如下方式获取。请注意，大多数浏览器都支持，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);
}

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

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

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

如果你可以使用jQuery，有一个方法叫做 .is

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

如果显示属性设置为无，这将返回 false。

其它你可能感兴趣的问题
上一篇Meteor.publish: 发布依赖于其他集合的集合 下一篇HTA 中的 JavaScript 版本