javascript - Change element display none back to default style value JS

Question

I have a function in JS that hides the element parsed:

function hide(id){
  document.getElementById(id).style.display = "none";
}

How can I create a function that brings back the element to the default style value. For instance a div display property is "block" as for an image is "inline-block", other elements are "inline" or lists are "list-item" How can I bring them back their default state?

function show(id){
  document.getElementById(id).style.display = "?????";
}

I know how to do it in Jquery but it is not an option.

In CSS there might be styles for the elements including style:none, which need to be overwritten to the default value.

Since there is CSS in my example making style.display = '' eliminates the style added with JS but gets back to whatever style is added in CSS, I want to bring it back to its default value even before assigning styles with CSS.

I tried this as it was suggested in a link in one of the comments:

elem = document.getElementById(id);
var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("display");

but in this case 'theCSSprop' returns "none" for a div, when I expect "block"

Any ideas? Thanks.

Answer 1

You need just assign it to empty value:

document.getElementById(id).style.display = "";

Or using removeProperty method:

document.getElementById(id).style.removeProperty( 'display' );

But note that removeProperty will not work on IE<9.

If you want to get original CSS value you will need probably to get it from empty <iframe> element. I created example on jsFiddle how to get current value using getComputedStyle and iframe value on jsFiddle.

Please note that getComputedStyle not support old versions of IE. It support IE9+.

For IE8 you should use Element.currentStyle