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.