Why I can't get these css properties on loading the page?

Question

Possible Duplicate:
Get a CSS value with JavaScript

could you tell me why I cant get these css properties when I load the page?

javascript:

function aviso(){
    alert("top: "+document.getElementById("divRojo").style.top);
    alert("position: "+document.getElementById("divRojo").style.position);
}

HTML:

<html>
    <head>
        <style type="text/css">
            #divRojo {
                width:100px;
                height:100px;
                background:red;
                left:200px;
                top:200px;
                position:static;
        }
    </style>
</head>

<body onload="aviso()">
    <div id="divRojo">
        Div Rojo
    </div>
</body>

</html>

Thanks in advance

score 2 · Answer 1 · answered Nov 22 '12 at 01:09

It's because the DOMElement.style property contains inline styles -- it does not contain style rules applied via CSS.

Use getComputedStyle to get the applied styles:

var el = document.getElementById("divRojo");
alert(window.getComputedStyle(el).top);
alert(window.getComputedStyle(el).position);

JSFiddle

Why I can't get these css properties on loading the page?

1 Answers1