Skip to content
Related Articles

Related Articles

HTML | DOM Style top Property

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 05 Jun, 2022

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: 

html




<!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: 

html




<!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:

  • Google Chrome 1 and above
  • Edge 12 and above
  • Internet Explorer 5 and above
  • Firefox 1 and above
  • Opera 6 and above
  • Safari 1 and above


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!