HTML | DOM Style right Property

Last Updated : 05 Jun, 2022

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>