How to get and set margin in Javascript

Margin in javascript is the same margin in html. You can set the amount of margin an element has using Javascript. To be clear, margin is the space between the border and the outside container holding the element.

1. How to set margin in Javascript

You can change the margin an element using the margin property. Lets look at how you can do this.

a. Setting all margins using Javascript

You can change the margin using the margin property "margin" in javascript. You can then use the id of the element to set the new margin:

var box= document.querySelector("#box");
box.addEventListener('click', function(){
      box.style.margin="50px 100px 50px 100px";
});

b. Changing top margin only

You are going to use the "marginTop" property to set the top margin only using javascript.

box.addEventListener('click', function(){
      box.style.marginTop="100px";
});

c. Changing bottom margin only

You can use the "marginBottom property to change the bottom margin in javascript.

box.addEventListener('click', function(){
      box.style.marginBottom="50px";
});

The element now has a margin of 50 pixels.

d. Changing left margin only

The "marginRight" property sets the new left margin to 100px.

box.addEventListener('click', function(){
   box.style.marginLeft="100px";
});

e. Changing right margin only

To change the right margin only use the "marginRight" property.

box.addEventListener('click', function(){
      box.style.marginRight="50px";
});

2. How to get the value of margin in javascript

Its also possible for you to obtain the values of margin using Javascript.

let’s begin by getting the value of all styles applied to the “box” element. To get these styles you use window.getComputedStyle(box).

In addition, you can make sure its compatible with older versions of Internet Explorer by add box.CurrentStyle .

Code:

var style= window.getComputedStyle(box) || box.currentStyle

You can now use a simple console.log(style.margin) or alert(style.margin) to get the margin values.

console.log(style.margin);

a. getting all margin at once

The full code should be as following:

1
2
3
4
5
    //a. Getting all margins using Javascript 
    box.addEventListener('click', function(){
        var style = box.currentStyle || window.getComputedStyle(box)
        console.log(style.margin);
    });

b. Getting the value top margin only

You can get the top margin value using this code:

1
2
3
4
5
    // b. Getting top margin only
    box.addEventListener('click', function(){
      var style = box.currentStyle || window.getComputedStyle(box)
      console.log(style.marginTop);
    });

c. Getting the value of bottom margin only

Use the following code to get the bottom margin:

1
2
3
4
5
    //c. Getting bottom margin only
    box.addEventListener('click', function(){
      var style = box.currentStyle || window.getComputedStyle(box)
      console.log(style.marginBottom);
    });

d. Getting the value of left margin only

The code for getting the value of right margin only:

1
2
3
4
5
    //d. Getting left margin only
    box.addEventListener('click', function(){
        var style = box.currentStyle || window.getComputedStyle(box)
        console.log(style.marginLeft);
    });

e. Getting the value right margin only