How to set the right position of a positioned element with JavaScript?

Javascript Object Oriented Programming Front End Technology

In this tutorial, we shall learn to set the right position of a positioned element with JavaScript.

What is a positioned element? The available position values in JavaScript are relative, absolute, fixed, or static. The static position is the default position value. Static elements are in the document order.

A positioned element's position is based on its properties like the top, right, bottom, and left.

We must set the position in every direction to align the elements as required. Here we are going to see the right position property.

Let us get deeper into the topic and understand how to set the position right.

Using the right property

With this property, we can set or return the position right of a positioned element. The right property includes margin, padding, border, and scrollbar also.

The position right does not work on the element that has a static position. The position right is the distance from the origin. The positive direction is towards the left in this case.

Syntax

Users can follow the syntax below for using this property.

object.style.right = "auto|length|%|initial|inherit";

This syntax allows us to set the required position right to the element's style.

Parameters

auto − The browser sets the position right.
length − Sets the position right in length units. Negative values are accepted.
% − Sets the position right in % of the parent element's width.
initial − Sets this property to its default value.
inherit − Inherits this property from its parent element.

The default value of this property is auto. The return value is a string representing the position right of a positioned element.

Example 1

You can try to run the following code to set the right position of a positioned element with JavaScript −


<!DOCTYPE html>
<html>
<head>
   <style>
   #box {
      width: 350px;
      height: 200px;
      background-color: orange;
      border: 3px solid red;
      position: absolute;
   }
   </style>
</head>
<body>
   <p>Click to set the right position.</p>
   <button type = "button" onclick = "display()"> Set Right Position</button>
   <div id="box">
      <p>This is a div. This is a div. This is a div. This is a
      div.</p>
      <p>This is a div. This is a div. This is a div. This is a
      div.</p>
      <p>This is a div. This is a div. This is a div. This is a
      div.</p>
   </div>
   <br>
   <br>
   <script>
      function display() {
         document.getElementById("box").style.right = "70px";
      }
   </script>
</body>
</html>

Example 2

In this program, we set the position right of multiple div elements having an absolute position.

When the user presses the button, we call the function to set the position right with the syntax given above.


<html>
<head>
   <style>
      .rtPosMultEl{
         position: absolute;
         width: 20px;
         height: 20px;
      }
      #rtPosMultEl1{
         background-color: grey;
         top: 20px;
      }
      #rtPosMultEl2{
         background-color: black;
         top: 80px;
      }
      #rtPosMultEl3{
         background-color: pink;
         top: 50px;
      }
      #rtPosMultWrap{
         position: relative;
      }
      #rtPosMultBtnWrap{
         margin-top: 80px;
         float: left;
      }
   </style>
</head>
<body>
   <h2>Setting the right position of the positioned elements using the "right" property.</h2>
   <div id = "rtPosMultWrap">
      <div class = "rtPosMultEl" id = "rtPosMultEl1"> </div>
      <div class = "rtPosMultEl" id = "rtPosMultEl2"> </div>
      <div class = "rtPosMultEl" id = "rtPosMultEl3"> </div>
   </div>
   <br>
   <div id = "rtPosMultBtnWrap">
      <p> Click on the button to set different position right values.
      </p>
      <button onclick = "setRight();"> Move </button>
   </div>
   <br>
</body>
<script>
   function setRight(){
      var rtPosMultBtnWrap =
      document.getElementById("rtPosMultBtnWrap");
      var rtPosMultEl1 = document.getElementById("rtPosMultEl1");
      var rtPosMultEl2 = document.getElementById("rtPosMultEl2");
      var rtPosMultEl3 = document.getElementById("rtPosMultEl3");
      var rtPosMultEl4 = document.getElementById("rtPosMultEl4");
      rtPosMultEl1.style.right = "20px";
      rtPosMultEl2.style.right = "40px";
      rtPosMultEl3.style.right = "60px";
   }
</script>
</html>

Example 3

In this program, we are setting the position right to a single absolute div element. We get the position right from the user.

When the user presses the button, we call the function to set the position right with the syntax given above.


<html>
<head>
   <style>
      #rtPosUsrEl{
         background-color: #B0E0E6;
         text-align: center;
         width: 200px;
         position: absolute;
      }
   </style>
</head>
<body>
   <div id = "rtPosUsrEl"> Move Me.</div>
   <br>
   <br>
   <div id = "rtPosUsrBtnWrap">
      <select id = "rtPosUsrSel">
         <option selected = "selected"/>auto
         <option/> 100px
         <option/> initial
         <option/> inherit
         <option/> 3%
         <option/> -5px
      </select>
      <br>
      <p>Choose the position right and click on the button.</p>
      <button onclick = "setRightUser();"> Set </button>
   </div>
   <br>
</body>
<script>
   function setRightUser(){
      var rtPosUsrSelTag = document.getElementById("rtPosUsrSel");
      var rtPosUsrSelIndx = rtPosUsrSelTag.selectedIndex;
      var rtPosUsrSelStat =
      rtPosUsrSelTag.options[rtPosUsrSelIndx].text;
      var rtPosUsrBtnWrap = document.getElementById("rtPosUsrBtnWrap");
      var rtPosUsrEl = document.getElementById("rtPosUsrEl");
      rtPosUsrEl.style.right = rtPosUsrSelStat;
      rtPosUsrEl.innerHTML = "<b>" + rtPosUsrEl.style.right + "</b>";
   }
</script>
</html>