Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    May 2007
    Posts
    118
    Thanks
    0
    Thanked 0 Times in 0 Posts

    troubles with getting element's position

    I have just a simple question.. i am wondering why the following alert is empty both in IE/FF.. dont understand why!?

    Code:
    <html>
    <head>
    <style>
    body{
    background-color:black;
    }
    
    #point {
    width:1px;
    height:1px;
    background-color:red;
    top:1px;
    left:10px;
    position:absolute;
    }
    </style>
    </head>
    <script>
    function MoveDiv(){
    alert(document.getElementById('point').style.top);
    }
    </script>
    <body>
    <input type="button" value="start" onclick="setInterval('MoveDiv()',3000);">
    <div id="point">1</div>
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    document.getElementById('point').style.top will only get the position if stated inline


    You can get the current position by using offsetTop

    alert(document.getElementById('point').offsetTop);

    or you can get the position set in the rule

    var el = document.getElementById('point')

    if(document.uniqueID && el.currentStyle){ // IE
    elPos=el.currentStyle.top
    }

    if(document.defaultView && document.defaultView.getComputedStyle){
    elPos=document.defaultView.getComputedStyle(el, '').getPropertyValue("top")
    }

    alert(elPos)
    Last edited by Mr J; 10-15-2007 at 02:03 PM.
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #3
    Regular Coder
    Join Date
    May 2007
    Posts
    118
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, thank you, and in which documentation is described that you can get the position only of inline elements (through el.style..)? Thank you

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by smalldog View Post
    I have just a simple question.. i am wondering why the following alert is empty both in IE/FF.. dont understand why!?

    Code:
    …
    alert(document.getElementById('point').style.top);
    …
    The DOM style property is a reference to the HTML/XHTML style attribute. Unless the CSS top property has been set via the style attribute, style.top will return an empty string.

    To get an element’s property values regardless of the source, you should use the DOM getComputedStyle method. Internet Explorer does not support this so you must use Microsoft’s proprietary currentStyle instead for that browser.
    Last edited by Arbitrator; 10-16-2007 at 02:05 AM. Reason: I added the second paragraph.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •