Why can't I access this CSS property in a JavaScript function?

Question

I can't access the left property of one image element in a JavaScript function when I set the property from within stylesheets but when I use inline styles on the image tag it works fine.

Here is my code:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
        <script type="text/javascript">
            function moveObjRight(obj) {
                var a = document.getElementById(obj);
                alert(a.style.left)
            }
        </script>
        <style type="text/css">
            #AS
            {
                top: 141px;
                left: 118px;
                position: absolute;
                height: 25px;
                width: 25px;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <img alt="asd" src="pic 3-4.jpg" id="AS" />
                <input type="button" value="Button" onclick="javascript:moveObjRight('AS');" />
            </div>
        </form>
    </body>
</html>

Olical · Accepted Answer · 2011-04-16 10:25:42Z

3

You need to use the computed styles properties. This can be achieved in a cross browser method with a simple function. Have a look on quirks mode for an explanation of the following function.

function getStyle(el,styleProp) {
    var x = document.getElementById(el);
    if (x.currentStyle)
        var y = x.currentStyle[styleProp];
    else if (window.getComputedStyle)
        var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
    return y;
}

answered Apr 16, 2011 at 10:25

Olical

41.7k12 gold badges58 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Peter Mortensen · Accepted Answer · 2012-11-21 18:04:30Z

0

For Mozilla Firefox, check the documentation for img.

In Internet Explorer, see <IMG> Property Pages Dialog Box.

edited Nov 21, 2012 at 18:04

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Apr 16, 2011 at 10:23

zudokod

4,1142 gold badges24 silver badges24 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2012-11-21 18:05:19Z

0

Just a suggestion (not an answer), use jQuery!

You would be able to access the left property with the following code.

$('#yourdiv').css('left');

Reference: .css()

edited Nov 21, 2012 at 18:05

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Apr 16, 2011 at 10:35

Oliver M Grech

3,1991 gold badge26 silver badges39 bronze badges

1 Comment

Peter Mortensen Over a year ago

It is a meme.

Collectives™ on Stack Overflow

Why can't I access this CSS property in a JavaScript function?

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related