CSS: "display: auto;"?

Question

The auto option that several CSS attributes give is really useful. However, there doesn't seem to be one for the display attribute. I would expect this to set the display attribute to the browser default depending on the tag; e.g., a <div> would reset to display: block;, but a <span> would reset to display: inline;.

1. Is there a display: auto equivalent I've missed?
2. If not, why not?
3. What's the most elegant workaround? (I'm working programmatically, specifically with jQuery.)

Answer 1

You should use:

$('element').css('display',''); 

That will set display to whatever is the default for element according to the current CSS cascade.

For example:

<span></span>  $('span').css('display','none'); $('span').css('display',''); 

will result in a span with display: inline.

But:

span { display: block }  <span></span>  $('span').css('display','none'); $('span').css('display',''); 

will result in a span with display: block.

This is not a problem: in fact, it's almost always the desired result.

Answer 2

In CSS3, there is an initial value. Perhaps try display: initial;

Answer 3

There is no display: auto property in CSS, the valid values are here

The default value is display: inline. See the display reference from MDN

Why is there no auto value? Simply because the CSS definition for the rule. You should also see the CSS rules around specificity as outlined in this article

Answer 4

There's a inherit option, which:

Specifies that the value of the display property should be inherited from the parent element

Other than that, just don't set display at all and it'll default to whatever it defaults to. Also, if you programmatically set it to nothing, I believe it just follows the default behavior then:

document.getElementById('myElement').style.display = '';