CSS: "display: auto;"?

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 rese开发者_如何学Got 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?

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.

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

You're looking for display: revert, which is like unset except that it keeps the user agent default stylesheet’s style in place.

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

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 = '';

Depending on the parent element and the tag element in question the browser can quickly adjust to suite it. Most effectively it's always good to use DTD standards in your HTML opening tag to declare other available properties for the display selector, otherwise it uses only "block" & "inline". consequently if DTD is declared, using a display: inline-block; property would be best in this case.