0

I'm not sure if I'm going to completely crazy or if there's something wrong with my computer.

I have a simple piece of JavaScript below but when I console log the style object it is completely empty. This is despite the fact the the element in question clearly has styles attached to it.

<!doctype html>
<html>
<head>

<style>

    #para{  
        width: 100px;
        height: 100px;
        position: absolute;
        left: 200px;
        top: 10px;
        border: 1px solid red;      
    }

</style>
</head>

<body>

    <div id="para" class="paraDiv">This is the div</div>

<script>
        window.onload = function(){
            var d = document.getElementById('para');    
            console.dir(d);
            console.log(d.style.top);
        }

</script>

</body>
</html>
Drongo
  • 89
  • 6
  • possible duplicate of [How do i get a computed style?](http://stackoverflow.com/questions/5910004/how-do-i-get-a-computed-style) – Alexis King Jan 29 '15 at 20:55

1 Answers1

0

The style property only gets information about styles applied inline via an element's style attribute. It doesn't contain any information about styles inherited from other elements or declared in style sheets.

Instead, you want window.getComputedStyle, which will give you the information you're looking for.

console.log(getComputedStyle(para).top);
Alexis King
  • 43,109
  • 15
  • 131
  • 205