Clear inline style after reset

Question

How do I remove the inline style which is added by JavaScript?

For example: if people click the button, the marginTop of div#test will be 30px, but what if I want to remove the inline style instead of resetting it to another value like 0?

I do not want to add a class to that element and remove it because it's not suitable in my use case.

const elm = document.querySelector('#test')

function change() {
  elm.style.marginTop = '30px';
}

#test {
  width: 150px;
  height: 60px;
  background-color: blue;
}

<div id="test"></div>
<button onclick="change()">Change</button>

Answer 1

either set as empty string

elm.style.marginTop = '';

or to remove the complete attribute use

removeAttribute

elem.removeAttribute('style');