Get and Set Margin in JavaScript

Updated on October 1, 2023 by Muhammad Zeeshan ⏱ 5 min read

In this tutorial, you will learn how to get and set margin in JavaScript for any HTML element.

As you already have learned in the CSS box model tutorial, margins are the outer spacing of the HTML elements. In CSS, we use a margin property that only allows us to set the margins of the HTML elements.

However, JavaScript allows us to do more with margins. For example, you can get, set, and modify existing margins of any HTML element using JavaScript. It helps a lot when we are working on dynamic websites.

The following are a few things that we can do by using JavaScript for margins:

We can adjust margins using JavaScript dynamically for responsive web design. For example, we set the margins based on screen sizes, and JavaScript detects the screen size changes and applies margins according.
In drag-and-drop web interfaces, we can use JavaScript to adjust margins. So, whenever a user drag-and-drop html elements the margin will adjust dynamically.
We can animate margins using JavaScript.
We can also center HTML elements using margins in JavaScript.
Also, we can add buttons that allow the users to adjust margins.

This tutorial is divided into the following three parts:

Checking or Getting Margin of an HTML Element and displaying its values on the screen.
Setting Margin of an HTML Element.
Manipulate or override the existing margins of an HTML Element.

Part 1: How to Get or Check Margin in JavaScript

Here, I am going to get the div element margin values that are already specified with CSS and will display them on the screen with the help of JavaScript.

For this, I already have specified the margins of an HTML div element with the id=”box” using CSS. What I am going to do is that I will use JavaScript to check or access the values of the margin property that I defined using CSS.

I will use the JavaScript window.getComputedStyle( ) method for this purpose.

Before starting, make sure you have defined an ID for the HTML div element for whom you want to get the margin. I added the ID container like this below:

→ index.html

<div id="container">
 <p> lorem ipsum ... </p>
</div>

Then, I applied the following CSS:

→ style.css

#container{
    background-color: aqua;
    border: 1px solid #333333;
    padding: 20px;
    margin: 10px 20px 30px 40px; 
}

Now, the following JavaScript syntax demonstrates how to get the margin in JavaScript and display it on the screen:

→ JavaScript Code

<script>
    var x = document.getElementById('container'); // access elemeent first

    var z = window.getComputedStyle(x).margin; // then use method

    document.write(z); // to display the output
</script>

Code Explanation:

In the first line, I get the HTML element by its id name using the getElementById method and store it in a variable called “x”.
Then, I created a variable “z” and used the window.getComputedStyle().margin method and put the name of the variable in the round brackets.
And then I used a document.write( ) method to display the output on the screen that is stored in the variable z.

The output of the above code:

Furthermore, to get the Margin of one side or custom sides, you can use the following syntax:

→ JavaScript Code

var marginTop = window.getComputedStyle(x).marginTop; // for Top Margin
var marginBottom = window.getComputedStyle(x).marginBottom; // for Bottom Margin
var marginRight = window.getComputedStyle(x).marginRight; // for Right Margin
var marginLeft = window.getComputedStyle(x).marginLeft; // for Left Side Margin

Also, you can print all using a document.write( ) method like this below:

→ JavaScript Code

document.write(marginTop + " " + marginBottom + " " + marginRight + " " + marginLeft);

Moreover, you can get many other things with the JavaScript getComputedStyle() method. Like getting padding, background, etc.

Part 2: How to Set Margin in JavaScript

The following syntax shows how to set the margin of an HTML element with JavaScript:

→ script.js

document.getElementById('container').style.margin = "50px";

You can use the above JavaScript method to set margins in HTML without any CSS.

Code Explanation:

I used a document.getElementById( ) method to select the HTML element with the id name ‘container‘.
Then, I used a style object with a margin to specify the margin of 50px in a string with double quotes.

Furthermore, if you want to set the margin-top, margin-bottom, margin-right, or margin-left then you can use the following syntax for each side:

→ script.js

document.getElementById('container').style.marginTop = "50px"; // sets the Top Margin
document.getElementById('container').style.marginBottom = "50px"; // sets the Bottom Margin
document.getElementById('container').style.marginRight = "50px"; // sets the Right Margin
document.getElementById('container').style.marginLeft = "50px"; // sets the Left Margin

For changing the back margin to default, you can use an empty string or use “auto”, like this below:

→ script.js

document.getElementById('container').style.marginLeft = "auto";

Part 3: How to Modify or Override the Existing Margin in JavaScript

The following syntax shows how to modify the existing margin of an HTML element:

→ script.js

document.getElementById('container').style.margin = "50px";

If you remember the previous syntax then this is absolutely the same syntax. It will rewrite the margin values and whatever margin the HTML element has, it will simply override and make it 50px.

Also, you can use the following syntax to set the margins of all the sides of the div container:

→ script.js

document.getElementById('container').style.margin = "50px 50px 50px 50px";

So, this is how you can get, set, and modify margins in JavaScript.

Also, don’t forget to share this tutorial to help others:

Topic: JavaScript

About The Author

Muhammad Zeeshan

Hi everyone, I'm a Full Stack Web Developer and Technical Writer. I just love to share my knowledge to help others in this community. I mostly write about HTML, CSS, JS, MySQL, and PHP.