The Style right property in HTML DOM is used to set or return the right position of a positioned element including padding, scrollbar, border, and margin.
Syntax:
- It is used to return the right property:
object.style.right
- It is used to set the right property:
object.style.right = "auto|length|%|initial|inherit"
Return Values: It returns a string that represents the right position of a positioned element
Property Value Description:
- auto- This value automatically sets the default right value by the browser.
- length- This value sets the right value in the specified length units. This specified length can be positive as well as negative.
- %- Percentage value sets the right value in the specified percentage of the parent element’s width.
- initial- This value sets the right property to its browser’s default value.
- inherit- This value sets the right property to the value from its parent element.
Example 1:
html
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Style right Property
</title>
<style>
#GfG {
position: absolute;
background-color: green;
color: white;
}
</style>
</head>
<body>
<h1> Geeks for Geeks </h1>
<h2> HTML|DOM Style right Property </h2>
<button onclick="myFunction()">Click here</button>
<GfG id="GfG">
<h1>GfG</h1>
</GfG>
<script>
function myFunction() {
document.getElementById("GfG")
.style.right = "100px";
}
</script>
</body>
</html>
|
Output:
- Before click on the button:
- After click on the button:
Example 2:
html
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Style right Property
</title>
<style>
#myGfG {
border: 1px solid #FF0000;
position: relative;
}
</style>
</head>
<body>
<h1> Geeks for Geeks </h1>
<h2> HTML|DOM Style right Property </h2>
<GfG id="myGfG">Welcome to Geeks for Geeks.</GfG>
<br>
<button type="button" onclick="myFunction()">
Click Here!
</button>
<script>
function myFunction() {
document.getElementById("myGfG")
.style.right = "-200px";
}
< GfG id = "myGfG" > Welcome to Geeks
for Geeks. < /GfG> < br >
< button type = "button"
onclick = "myFunction()" > Click Here! < /button>
< script >
function myFunction() {
document.getElementById("myGfG")
.style.right = "-200px";
}
</script>
</body>
</html>
</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.5 and above
- Firefox 1 and above
- Opera 5 and above
- Safari 1 and above
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!