Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Style top Property

  • Last Updated : 02 Aug, 2019

The Style top Property in HTML DOM is used to set or return the top position of a positioned element including padding, scrollbar, border and margin.
Syntax:

  • It is used to return the top property:
    object.style.top
  • It is used to set the top property:
    object.style.top = "auto|length|%|initial|inherit"

Property Value Description:

  • auto- This value automatically sets the default top value by the browser.
  • length- This value sets the top value in the specified length units. This specified length can be positive as well as negative.
  • %- Percentage value sets the top value in the specified percentage of the parent element’s width.
  • initial- This value sets the top property to its browser’s default value.
  • inherit- This value sets the top property to the value from its parent element.

Return Value: A String, representing the top position of a positioned element.

Example 1:




<!DOCTYPE html>
<html>
  
<head
    <title>
        HTML | DOM Style top Property
    </title>
    <style>
        #myBtn {
            position: absolute;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
  
    <h2
        HTML DOM Style top Property 
    </h2>
  
    <button type="button" id="myBtn" 
            onclick="myFunction()">Click here!
    </button>
  
    <script>
        function myFunction() {
            document.getElementById("myBtn")
            .style.top = "200px";
        }
    </script>
  
</body>
  
</html>

Output:



  • Before Click on the button:

  • After Click on the button (Note that click here button moved down):

    Example 2:




    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            HTML | DOM Style top Property
        </title>
        <style>
            #GfG {
                border: 1px solid #FF0000;
                position: relative;
            }
        </style>
    </head>
      
    <body>
      
        <h1> HTML|DOM Style top Property</h2>
      
        <div id="GfG">Welcome to Geeks for Geeks.</div>
        <br>
      
        <button type="button" onclick="myFunction()">
          Click Here!
        </button>
      
        <script>
    function myFunction() {
      document.getElementById("GfG")
      .style.top = "-20px";
    }
    </script>
      
    </body>
    </html>

    Output:

    • Before click on the button:

    • After click on the button:

    Supported Browsers: The browser supported by DOM style top property are listed below:

    • Google Chrome
    • Internet Explorer
    • Firefox
    • Opera
    • Safari

    Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




    My Personal Notes arrow_drop_up
Recommended Articles
Page :