Javascript Reference - HTML DOM Style right Property








The right property sets or gets the right position of a positioned element.

Browser Support

right Yes Yes Yes Yes Yes

Syntax

Return the right property:

var v = object.style.right

Set the right property:

object.style.right='auto|length|%|initial|inherit'

Property Values

ValueDescription
auto Default value. The browser does the calculation.
length Set width in px, cm, etc.
% Set width in percent of the containing element
inherit Inherit the width property from the parent element




Technical Details

Default Value: auto
Return Value: A string representing the right position
CSS Version CSS2

Example

The following code shows how to set the right position of a <div> element.


<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {<!-- w  w w  .  j a v a 2 s  .c  o m-->
    position: absolute;
    background-color: coral;
    color: white;
}
</style>
</head>
<body>
<button onclick="myFunction()">test</button>
<div id="myDIV">myDIV</div>
<script>
function myFunction() {
    document.getElementById("myDIV").style.right = "100px";
}
</script>
</body>
</html>

The code above is rendered as follows:





Example 2

The following code shows how to use negative values to set the right position of a <div> element.


<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {<!--from  ww w . j a  va 2  s  .com-->
    border: 1px solid #FF0000;
    position: relative;
}
</style>
</head>
<body>
<div id="myDiv">This is a div element.</div>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {
    document.getElementById("myDiv").style.right = "-100px";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to get the right position of a <div> element.


<!DOCTYPE html>
<html>
<body>
<!-- w  w w.  ja  va2 s  . com-->
<div id="myDiv" style="position:absolute;right:15px;">This is a div element.</div>

<button type="button" onclick="myFunction()">test</button>

<script>
function myFunction() {
    console.log(document.getElementById("myDiv").style.right);
}
</script>

</body>
</html>

The code above is rendered as follows: