Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to set the bottom position of a positioned element with JavaScript?
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. First, 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 (px, em, rem, etc.).
% ? The bottom position as a percentage of the parent element's height.
inherit ? Inherits its parent element's property.
initial ? Sets to default value.
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.
<html>
<head>
<style>
.container {
position: relative;
width: 100%;
height: 300px;
border: 2px solid #ccc;
background-color: #f9f9f9;
}
#root {
position: absolute;
border: 1px solid black;
background-color: aqua;
padding: 10px;
}
</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 = '20px';
}
</script>
</body>
</html>
Using the Style setProperty() Method
In JavaScript, the style setProperty() method sets a new or existing CSS property of an element. First, 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 access the element using the document.getElementById() method and then use the style.setProperty method. The property name should be 'bottom', and the value and priority will be as per user requirements.
Parameters
property_name ? The name of the CSS property to be set (in this case, 'bottom').
value ? The new value of the property.
priority ? The priority of the property value (Optional, e.g., 'important').
Example
In the below example, we have used the style.setProperty() method to set the bottom position of a positioned element with JavaScript. We demonstrate setting the bottom position with different units and values.
<html>
<head>
<style>
.container {
position: relative;
width: 100%;
height: 300px;
border: 2px solid #ccc;
background-color: #f9f9f9;
}
#root {
position: absolute;
border: 1px solid black;
background-color: lightgreen;
padding: 10px;
}
</style>
</head>
<body>
<h3>Set the bottom position using <i>style.setProperty()</i> method in JavaScript</h3>
<button onclick="setBottom()">Set Bottom Position (50px)</button>
<button onclick="setBottomPercent()">Set Bottom Position (10%)</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', '50px');
}
function setBottomPercent() {
const root = document.getElementById('root');
root.style.setProperty('bottom', '10%');
}
</script>
</body>
</html>
Comparison
| Method | Syntax Complexity | Priority Support | Use Case |
|---|---|---|---|
style.bottom |
Simple | No | Basic positioning |
style.setProperty() |
More verbose | Yes (optional parameter) | Dynamic property names or priority needed |
Key Points
The element must have a position value of
absolute,relative, orfixedfor bottom positioning to work.Use units like 'px', 'em', 'rem', or '%' when setting values.
The
setProperty()method allows setting CSS priority with the third parameter.Both methods immediately update the element's position on the page.
Conclusion
Both style.bottom and style.setProperty() provide effective ways to set the bottom position of positioned elements. Use style.bottom for simple cases and style.setProperty() when you need more control or dynamic property handling.
2K+ Views
