javascript - JavaScript .style.display？

Question

我想从 HTML 元素中获取显示属性。当我编写内联 CSS 时，它可以工作，但如果我使用一个类，它就不行。

这有效：

<p id="p1" style="display:none;">This is some text.</p>​
<script>alert(document.getElementById("p1").style.display);</script>

http://jsfiddle.net/bwzAN/2/

这不起作用：

<style>.deneme{ display: none; }​&lt;/style>
<p id="p1" class="deneme">This is some text.</p>​
<script>alert(document.getElementById("p1").style.display);</script>

http://jsfiddle.net/bwzAN/7/

为什么？是否有可能使第二种情况的行为与第一种情况一样？我该如何解决？

Answer 1

试试看getComputedStyle()- DEMO

$(document).ready(function(){
    var elem = document.getElementById("p1");
    var st   = window.getComputedStyle(elem, null).getPropertyValue("display");

    alert( st );
});

Answer 2

看看 getComputedStyle()/getPropertyValue()。正如您已经提到的，属性 .style.display 只会返回内联样式属性。

var yourDisplay = window.getComputedStyle(document.getElementById('yourID'), null).getPropertyValue('display');

Answer 3

您需要获取“计算样式”（即“最终结果”）而不是您的设置。

我创建了一个 JSFiddle（你的非工作原件的一个分支）来帮助你：http: //jsfiddle.net/Jamesking56/qTKYK/2/