Skip to content
Related Articles

Related Articles

HTML | DOM Style right Property

View Discussion
Improve Article
Save Article
  • Last Updated : 05 Jun, 2022
View Discussion
Improve Article
Save Article

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!