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 left margin of an element with JavaScript?
In this tutorial, we will learn how to set the left margin of an element with JavaScript.
Margin is the space around an element outside its border. The margin of an element can be on all sides, such as: left, right, top, and bottom. Use the marginLeft property in JavaScript to set the left margin.
In this tutorial, we will discuss two approaches to setting the left margin ?
Using the marginLeft property
Using the setProperty method
Using the marginLeft property to set the left margin of an element
The marginLeft property of an element in JavaScript is available for each element object. This property sets the left margin of an element. The document.getElementById() method is used to get the element object. After that, we use the marginLeft property to set the left margin of an element.
Syntax
const element = document.getElementById('element')
element.style.marginLeft = length | % | auto | initial
In the above syntax, the marginLeft property is used that is available on the style property of the element object.
Parameters
length ? The left margin of the element in unit length.
% ? The left margin of the element in percentage.
auto ? The left margin of the element sets by the browser.
initial ? The left margin of the element sets to default.
Example
In the below example, we set the left margin of an element with JavaScript using the marginLeft property. The "Set Left Margin" button has a click event assigned to it that calls the "setLeftMargin()" function. It sets the left margin of multiple elements.
<html>
<head>
<style>
div {
padding: 15px;
margin-top: 5px;
background-color: rgb(253, 211, 223);
}
</style>
</head>
<body>
<h2> Using the <i> marginLeft property </i> with JavaScript to set the left margin of an element </h2>
<button onclick="setLeftMargin()"> Set Left Margin </button>
<div id="element1"> The element 1 </div>
<div id="element2"> The element 2 </div>
<div id="element3"> The element 3 </div>
<div id="element4"> The element 4 </div>
<script>
// all elements
const e1 = document.getElementById('element1')
const e2 = document.getElementById('element2')
const e3 = document.getElementById('element3')
const e4 = document.getElementById('element4')
// 'Set Left Margin' button click event handler function
function setLeftMargin() {
e1.style.marginLeft = '50px'
e1.innerHTML = 'The element 1 (marginLeft: 50px)'
e2.style.marginLeft = '20%'
e2.innerHTML = 'The element 2 (marginLeft: 20%)'
e3.style.marginLeft = 'auto'
e3.innerHTML = 'The element 3 (marginLeft: auto)'
e4.style.marginLeft = '100px'
e4.innerHTML = 'The element 4 (marginLeft: 100px)'
}
</script>
</body>
</html>
Using the setProperty method for the left margin of an element
The setProperty method in JavaScript is another way to set any new or existing property of an element. It takes the property name and value in the arguments and sets that property with the value provided. For example, to set the left margin of an element, the setProperty method takes 'margin-left' as the first argument, and in the second argument, it takes the value. This method is available in the style object that is present in the element object of an element.
Syntax
document.getElementById('element').style.setProperty(name, value, priority)
In the above syntax, the document.getElementById() method provides the element object so that we can use the setProperty method.
Parameters
name ? The name of the property.
value ? The property value.
priority ? The priority of the property value (optional).
Example
In this example, we use the setProperty method to set the left margin of an element dynamically based on user input.
<html>
<head>
<style>
div {
padding: 15px;
margin-top: 5px;
background-color: rgb(253, 211, 223);
}
</style>
</head>
<body>
<h2> Using the <i> setProperty method </i> with JavaScript to set the left margin of an element </h2>
<h4> Enter the left margin value (in % or px) for the element: </h4>
<input type="text" id="margin-left-input" name="margin-left-input" value="30%">
<button onclick="setLeftMargin()"> Set Left Margin </button>
<div id="root"> The root element </div>
<script>
// 'Set Left Margin' button click event handler function
function setLeftMargin() {
const root = document.getElementById('root');
// user input value for left margin
const margin_left_value = document.getElementById('margin-left-input').value;
root.style.setProperty('margin-left', margin_left_value);
root.innerHTML = 'The root element (marginLeft:' + margin_left_value + ')';
}
</script>
</body>
</html>
Comparison
| Method | Usage | Best For |
|---|---|---|
marginLeft |
Direct property access | Simple, straightforward margin setting |
setProperty() |
Generic property setter method | Dynamic property names or complex styling |
Conclusion
Both methods effectively set the left margin of elements. Use marginLeft for direct access or setProperty() for dynamic property manipulation. Choose based on your specific requirements and coding style.
5K+ Views
