JavaScript – Change the Margin of HTML Element

To change the margin of a HTML Element using JavaScript, get reference to this HTML Element, and assign required margin value to the element.style.margin property.

In the following example, we will change the margin of HTML Element with id "myElement" to "20px", in JavaScript, using element.style.margin property.

example.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #myElement {
            border:1px solid #CCC;
            width:100px;
            height:100px;
        }
    </style>
    <meta charset="utf-8">
</head> 
<body>
    <h2>Change Margin of HTML Element using JavaScript</h2>
    <div id="myElement">Hello World!</div>
    <br>
    <button type="button" onclick="changeStyle()">Click Me</button>
    <script>
    function changeStyle(){
        var element = document.getElementById("myElement");
        element.style.margin = "20px";
    }
    </script>
</body>
</html>

Conclusion

In this JavaScript Tutorial, we learned how to change the margin of a HTML Element using JavaScript.