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

Javascript Web Development Front End Technology

In this tutorial, we will learn how to set the bottom position of a positioned element with JavaScript.

The position property sets how the element should be positioned in the DOM, and the top, bottom, left, and right properties set the final location of the positioned elements. In JavaScript, we have different ways to set the bottom position of a positioned element, and in this tutorial, we will learn two of them −

Using the style.bottom Property
Using the style.setProperty Method

Using the style.bottom Property

In JavaScript, the style.bottom property of an element is used to set the bottom position of a positioned element. Firstly, we get the element object using the document.getElementById() method and then set the style.bottom property.

Syntax

const object = document.getElementById('element_id')

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

In the above syntax, ‘element_id’ is the id of a positioned element. We are accessing the element using the document.getElementById() method and then we are setting the bottom position using style.bottom property.

Parameters

auto − The browser will set the position.
length − Sets the bottom position in length units.
% − The top position in % of the parent element's height.
inherit − Inherits its parent element’s property.
initial − Sets to default.

Example

In the below example, we have used the style.bottom property to set the bottom position of a positioned element with JavaScript. We have used a button click event function to set the bottom position of the element. The "setBottom" function is executed whenever we click on the "Set Bottom Position" button. The function accesses the element by the document.getElementById() method and then sets its style.bottom property value.


<html>
<head>
   <style>
      .container {
         width: 100%;
         height: 100%;
      }
      #root {
         position: absolute;
         border: 1px solid black;
         background-color: aqua;
      }
   </style>
</head>
<body>
   <h3> Set the bottom position of a positioned element using <i> style.bottom </i> property in JavaScript </h3>
   <button onclick="setBottom()">Set Bottom Position</button>
   <div class="container">
      <div id="root">I am a positioned element</div>
   </div>
   <script>
      function setBottom() {
         const root = document.getElementById('root')
         root.style.bottom = '40%'
      }
   </script>
</body>
</html>

Using the Style setProperty() Method

In JavaScript, the style setProperty() method sets a new or existing property of an element. Firstly, we get the element object using the document.getElementById() method and then set the bottom position using the style.setProperty method.

Syntax

const object = document.getElementById('element_id')

object.style.setProperty(property_name, value, priority)

In the above syntax, ‘element_id’ is the id of a positioned element. We are accessing the element using the document.getElementById() method and then used the style.setProperty. In the property name, it should be ‘bottom’, and the value and priority will be as per users.

Parameters

property_name − The name of the property to be set.
value − The new value of the property.
priority − The priority of the property value (Optional).

Example

In the below example, we have used the style bottom property to set the bottom position of a positioned element with JavaScript. We have used an input field to take the user's input to set the bottom position of the element. The "setBottom" function is executed whenever we click on the "Set Bottom Position" button. The function first gets the input field’s value from the document.getElementById() method and value property, and then set the bottom position using the style.setProperty method.


<html>
<head>
   <style>
      .container {
         width: 100%;
         height: 100%;
      }

      #root {
         position: absolute;
         border: 1px solid black;
         background-color: aqua;
      }
   </style>
</head>
<body>
   <p> Click the below button to set the bottom position of a positioned element using <i> style.setProperty method </i> in JavaScript </p>
   <button onclick="setBottom()">Set Bottom Position</button>
   <div class="container">
      <div id="root">I am a positioned element</div>
   </div>
   <script>
      function setBottom() {
         const root = document.getElementById('root')
         root.style.setProperty('bottom', 40)
      }
   </script>
</body>
</html>

In this article, we learned how to set the bottom position of a positioned element with JavaScript. We have seen two ways to set the bottom position; firstly, using the style bottom property, and secondly, using the style setProperty method. In the first example, we see how to set the bottom position of a positioned element using a button click event. In the second example, we take the value of the bottom position from an input field, which takes the user’s desired value to set in the bottom position. Users now understand how to set the bottom position of a positioned element with JavaScript.