HTML DOM Style top Property
The HTML DOM Style top Property is used to set or return the top position of a positioned element including padding, scrollbar, border, and margin.
Syntax:
- It returns the top property.
object.style.top
- It sets the top property.
object.style.top = "auto | length | % | initial | inherit"
Property Values:
- 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: In this example, we will use the HTML DOM Style top Property to set the top position of element.
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM Style top Property
</title>
<style>
#myBtn {
position: absolute;
}
</style>
</head>
<body>
<h2>
HTML DOM Style top Property
</h2>
<button id="myBtn" onclick="myFunction()">
Click here!
</button>
<script>
function myFunction() {
document.getElementById("myBtn")
.style.top = "100px";
}
</script>
</body>
</html>
Output:
Example 2: In this example, we will use the HTML DOM Style top Property to set the top position of element.
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM Style top Property
</title>
<style>
#GfG {
border: 1px solid black;
width: 250px;
text-align: center;
position: relative;
}
</style>
</head>
<body>
<h2>HTML DOM Style top Property</h2>
<div id="GfG">Welcome to w3wiki</div>
<br>
<button type="button" onclick="myFunction()">
Click Here!
</button>
<script>
function myFunction() {
document.getElementById("GfG").style.top = "-20px";
}
</script>
</body>
</html>
Output:
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
Contact Us