How to set the left margin of an element with JavaScript?

Javascript Web Development Front End Technology

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


<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>

In this tutorial, we learned how to set the left margin of an element with JavaScript. We have seen two approaches using the marginLeft property and the setProperty method. Users can follow any of these methods to set the left margin of an element.