Question

I want to get display attribute from an HTML element. When I write inline CSS, it works, but if I use a class it doesn’t.

This works:

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

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

This does not work:

<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/

Why? Is it possible to make the second case behave like the first? How can I fix it?

Answer 1

Try it with getComputedStyle() – DEMO

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

    alert( st );
});