HTML | DOM Style top Property

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

My Personal Notes

Recommended Posts: