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.getElementBy…

Accepted Answer

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`

Change element display none back to default style value JS

Solution

Problem