37

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?
jameshfisher
  • 34,029
  • 31
  • 121
  • 167

6 Answers6

37

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.

thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • 4
    Ja, true. Not quite the same, however, as it removes the attribute from the element, allowing less specific rules to apply, rather than overriding those rules with the browser default. E.g., I have `a { display: block; }` in a stylesheet, I'd expect `` to set it to `inline`. – jameshfisher Jul 02 '11 at 13:08
  • @eegg: What a coincidence, I was just updating my answer to clear up that possible confusion. Evidently, I'm psychic. – thirtydot Jul 02 '11 at 13:10
  • @eegg: There is no `display: auto`. The initial value for all elements is `inline`. The *browser* sets different "defaults" for different elements using CSS itself (see my comment on @Ryan's answer). There is no `display: set-to-whatever-the-user-agent-value-is-for-this-element`. – thirtydot Jul 02 '11 at 13:13
  • That's fair enough. I had thought the CSS spec defined the defaults (e.g. `
    ` is a block element). Good to know otherwise.
     – jameshfisher Jul 02 '11 at 13:51
  • Indeed, as far I could find, W3C does not specify which elements should have which default styling (including have display:block, display:table, display:inline or whatever). This can be seen throughout the specification where it says things like "_..assuming the DIV and the P both have 'display: block'.._" ([source](http://www.w3.org/TR/CSS2/visuren.html#anonymous-block-level)). A few years ago W3C did release a sample stylesheet (written for HTML4 at the time) http://www.w3.org/TR/CSS2/sample.html – Timo Tijhof Nov 23 '11 at 02:55
  • @thirtydot - so can this be done the same way with css - setting `display: ''`? – jbyrd Nov 10 '15 at 20:30
  • This would be a good answer except for the gratuitous use of jQuery. – RobG Apr 28 '16 at 23:33
  • @RobG: Note that the question (from 2011) says "I'm working programmatically, specifically with jQuery". I do completely agree that jQuery is not necessary, feel free to improve my answer. – thirtydot Apr 29 '16 at 08:33
  • 1
    Btw - I've just changed the accepted answer. In 2011, this was probably the best answer, but `display: revert` is a significantly better answer in 2023. I also removed reference to jQuery, which is extremely outdated now and probably doesn't help anyone hitting this page. – jameshfisher Feb 11 '23 at 09:57
  • @jameshfisher: Good idea. I would suggest to edit `display: revert` into my answer, since accepted answers are no longer pinned to the top, so a lot of people are going to miss that low upvotes accepted answer. – thirtydot Feb 12 '23 at 01:50
24

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

cmbuckley
  • 40,217
  • 9
  • 77
  • 91
Miles Libbey
  • 1,583
  • 2
  • 10
  • 10
2

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

Nimantha
  • 6,405
  • 6
  • 28
  • 69
Ryan
  • 1,878
  • 1
  • 14
  • 17
  • 2
    The default `display` value is `inline`, but the user agent stylesheet of the browser sets different values for many elements. Firefox runs this, for example: http://mxr.mozilla.org/mozilla-central/source/layout/style/html.css – thirtydot Jul 02 '11 at 12:44
  • Understood however the JS solutions are not best practice. Best practice would be to assign the "default" values you would like to assign to the CSS html elements under the rules of specificity and when you want to manipulate this use a defined class. – Ryan Jul 02 '11 at 12:52
  • 5
    W3Schools is an awful reference site. Here's a better reference site: http://reference.sitepoint.com/css/display – Yi Jiang Jul 02 '11 at 13:19
  • @Yi Jiang it's actually 100% compliant to the W3C specifications to the rules set out and it is current, the reference you provided is not current but in saying that this specific property hasn't changed so the information is still correct. I would suggest finding another reference site that updates its content past FF 3.5, IE8, Safari 4, Chrome 2.0 and Opera 10. Reference sites are up to the user, at the end of the day the best one is W3C but how many people can be bothered reading that much content? W3Schools gives the same basic information, updated and in an easier manner – Ryan Jul 02 '11 at 13:28
  • 1
    @Ryan: W3Schools is a poor choice. See: http://w3fools.com/. Be sure to read that link, especially: "W3Schools is trouble - W3Schools.com is not affiliated with the W3C in any way. Members of the W3C have asked W3Schools to explicitly disavow any connection in the past, and they have refused to do so." – thirtydot Jul 02 '11 at 13:55
  • @thirtydot all references have general issues outlined in w3fools.com, what content in the specific reference I posted is incorrect? The reference posted is more up to date and has the same content. Also note that I did recommend W3C who is the true source of the information in the standards being talked about. I don't recommend W3Schools as an educator but for basic information they are now good. You should also encourage w3fools to update the information on their website that is also out of date as w3schools have corrected most of the problems outlined there. Lets get back on-topic now – Ryan Jul 02 '11 at 14:09
  • @Ryan: "all references" do not have multiple glaring mistakes, like W3Schools does. The information in the [Sitepoint reference](http://reference.sitepoint.com/css/display) is of a far higher quality than that of the [W3Schools one](http://www.w3schools.com/cssref/pr_class_display.asp). I don't care if there's nothing wrong with that *particular* W3Schools page - I care that you're recommending a site where there's commonly faulty or misleading information. Take this page for instance: http://w3schools.com/html/html_head.asp - there's no doctype in the "simplified HTML document". It's sloppy. – thirtydot Jul 02 '11 at 14:20
  • 1
    @thirtydot yes it is missing the doctype and it shouldn't I agree but I provided a specific resource and the HTML HEAD information is not part of the information supplied. I understand what you're saying and you are reading something into my posts that just isn't there. I have not recommended a site but a specific resource page and most people have the intelligence to recognize and understand this without explanation. We need to now get back on-topic ok. – Ryan Jul 02 '11 at 14:32
2

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

BallpointBen
  • 9,406
  • 1
  • 32
  • 62
1

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 = '';
Kon
  • 27,113
  • 11
  • 60
  • 86
  • 4
    So, a span would inherit `display:block` from a div, probably not what OP wants. – Wesley Murch Jul 02 '11 at 12:34
  • Just saying it's an option... but you're right, probably not. I do mention display = "" though. – Kon Jul 02 '11 at 12:36
  • 3
    Is `inherit` actually a legal value for `display`? I don't trust w3schools links by default. – Wesley Murch Jul 02 '11 at 12:39
  • 3
    @Wesley Murch: Yes, it's legal. Here's a more reliable link: http://www.w3.org/TR/CSS21/visuren.html#display-prop – thirtydot Jul 02 '11 at 12:41
  • @Wesley, how is this? Good enough for you? http://www.w3.org/wiki/CSS/Properties/display#Values – Kon Jul 02 '11 at 12:41
  • That's great, thanks guys - I should have just looked it up myself. I don't need `inherit` very often, especially not with the display property. It is quite useful outside the context of this question. – Wesley Murch Jul 02 '11 at 12:49
-1

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.

Nimantha
  • 6,405
  • 6
  • 28
  • 69
Charming Prince
  • 491
  • 3
  • 11