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:
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
Last Updated :
05 Jun, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...