Search code examples
javascriptstylesheetposition

Can't get left position with global stylesheet in JavaScript

I need to get the upper left position of an image in JavaScript. I define the location of an image in a global style sheet:

<style type="text/css">
img.movable { position:relative; top:0px; left:375px; }
</style>

When I define the image using the global style

<img id="image11" class="movable" src="testimage.jpg" onclick="jump()" />

The style.left attribute is empty:

<script type="text/javascript">
function jump() {
    xpos = document.getElementById("image11").style.left;
    alert( "style.left="+xpos );

    xpos = document.getElementById("image11").offsetLeft;
    alert( "offsetLeft="+xpos );
}
</script>

But when I define the image using an inline style:

<img id="image11" style="position:relative; top:0px; left:375px;" src="logo.jpg" onclick="jump()" />

style.left contains a value.

This behaviour is the same for IE8 and Firefox. Any ideas why that is?

Cheers,

Martin.

Solution

  • el.style is actually a map of all the css properties applied using the style attribute. To get styles defined in stylesheets or default browser styles, you need to use computed style. Quirksmode, as usual, is a first stop.