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