Resetting styles with style attribute in JavaScript

Suppose we decide to hide an element due to some event:

elem.style.display = 'none';

Let now we decide to show it back. This means that the display property needs to be returned to its original value. For example:

elem.style.display = 'block';

The problem is that it's not convenient. After all, the original value did not necessarily have to be block. It could be flex or inline-block or something else. It could be set by us in the CSS file, or it could be taken by the browser by default. Tracking the correct value is difficult.

Luckily, there is a way to easily revert the original value of a property back. You just need to assign an empty string as the value of the property:

elem.style.display = '';

Given a div and two buttons. Hide the div by clicking on the first button, show it by clicking on the second one.

Given a div and two buttons. On click on the first button, set the div color to red, and on click on the second button, retrieve the original color to the div.

enru