//INPUT: Read element positions

<New code>

//INPUT JS: document.querySelector( "#exampleId" ).offsetTop
— returns the top position of #exampleId in relation to its parent element

//INPUT JS: document.querySelector( "#exampleId" ).offsetLeft
— returns the left position of #exampleId in relation to its parent element

Find out where something is

When you want to move something around, you often need to read the current position of something.

In Javascript, if you have an HTML element that has an id and has been set to position: absolute, you can read the top and left positions of it using the following code:

document.querySelector( '#exampleId' ).offsetTop
document.querySelector( '#exampleId' ).offsetLeft

Common errors

Although Javascript will allow you to find out the .offsetRight or .offsetBottom of something, in practical use, you only ever use .offsetTop and .offsetLeft.

Avoid using .offsetBottom and .offsetRight. They can lead to confusing or buggy code.

As well, remember that the .offset* properties only ever return a number. It does not give you the units of measure (px).

Example code


The above code was created with:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>INPUT - Read element positions</title>
        <meta name="description" content="Learn how to read element positions with Javascript">
        <meta name="author" content="Dave Drapak">
        <!--
            Change log:
                26. Sept 2015   - created!                                  - Drapak
                2. Oct 2015     - simplified and add console logs           - Drapak
                5. March 2017   - reworked for clearer programming style    - Drapak
                9. October 2018 - moved to new id style                     - Drapak
                27. Oct 2018    - moved to querySelector and clear variables- Drapak
        -->
        <style>
            #imageId {
                width: 100px;
            }
        </style>
    </head>
    
    <body>
        <h1>
            Current position of <code>#imageId</code>:
            <img 
                id="imageId" 
                src="https://www.kasandbox.org/programming-images/food/sushi.png">
        </h1>
        
        <button id="topButtonId">
            Show number of pixels from the top of the window
        </button>
        
        <button id="leftButtonId">
            Show number of pixels from the left of the window
        </button>
 
        <script>
            //OUTPUT: pop up the number of pixels from the TOP
            var displayTopPosition = function () {
                console.log( 'in displayTopPosition...' );
                
                //INPUT: read the current position from the top of the screen
                var currentTop  = document.querySelector( '#imageId' ).offsetTop;
                
                //OUTPUT: pop up the current left position
                alert( topPosition );
            }
            
            //OUTPUT: pop up the number of pixels from the LEFT
            var displayLeftPosition = function () {
                console.log( 'in displayLeftPosition...' );

                //INPUT: read the current position from the left of the screen              
                var currentLeft = document.querySelector( '#imageId' ).offsetLeft;

                //OUTPUT: pop up the current top position               
                alert( currentLeft );
            }
            
            //INPUT: trigger displayTopPosition when #topButtonId is clicked
            document.querySelector( '#topButtonId' ).onclick    = displayTopPosition;
            
            //INPUT: trigger displayLeftPosition when #leftButtonId is clicked
            document.querySelector( '#leftButtonId' ).onclick   = displayLeftPosition;
        </script>
    </body>
</html>

Learn more