JavaScript .style.display？

Question

我想从HTML元素中获取display属性。当我编写内联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; }​</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/