HTML | DOM Style right Property
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 > Beginner for Beginner </ 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 > Beginner for Beginner </ h1 > < h2 > HTML|DOM Style right Property </ h2 > < GfG id="myGfG">Welcome to Beginner for Beginner.</ GfG > < br > < button type="button" onclick="myFunction()"> Click Here! </ button > < script > function myFunction() { document.getElementById("myGfG") .style.right = "-200px"; } < GfG id = "myGfG" > Welcome to Beginner for Beginner. < / 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
Contact Us