javascripthtmlcssdisplay

How to return default display style of element with javascript?

Different HTML elements have different default display value. For example:

I have element which is hidden with javascript:

element.style.display = 'none';

How can I set the correct default value back, without having to deduce it from the element type:

// Sets 'block' if 'element' is 'div', 'inline-block' if 'span', etc.    
element.style.display = ?;

MDN reference doesn't seem to list default or anything similar for this.

No jQuery or similar libraries, vanilla Javascript only.

Solution

  • You can use the Remove Property.

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

    This will then use the default.

    This seems to remove a display defined inline like style="display:none;" but not with <style> #id{ display:none;} </style>.

    To remove a display:none; inside <style> it works with: element.style.display = 'initial';