What does style.display = '' actually do?

After researching this issue for a couple of hours, I found that one of the most efficient ways to toggle a page element's display (in HTML) is to do something like:

// showing
document.getElementById('element').style.display = '';

// hiding
document.getElementById('element').style.display = 'none';

Simple question: What does style.display = '' actually do?

Does it "reset" the original display property?

Or does it remove the display property, thereby using the default style for display?

..........................................

Would be nice to know: Does anyone know of any links to any kind of documentation about this?

(Yes, I have Google-d this issue, but I'm probably not entering the right search term and keep coming up with completely un-related sear开发者_如何学运维ch results.)

Thanks for any suggestions or links.

Yes, it resets the element's display property to the default by blanking out the inline "display: none", causing the element to fall back on its display property as defined by the page's ranking CSS rules.

For example, here's a <div> with the ID of "myElement".

<div id="myElement"></div>

A <div> has a setting of display:block by default. In our style sheet, suppose we specify that your <div> is to be displayed as table:

div#myElement
{
    display:table;
}

Upon loading your page, the <div> is displayed as table. If you want to hide this <div> with scripting, you might do any of these:

// JavaScript:
document.getElementById("myElement").style.display = 'none';

// jQuery:
$("#myElement").toggle(); // if currently visible
$("#myElement").hide();
$("#myElement").css({"display":"none"});

All of thse have the same effect: adding an inline style property to your <div>:

<div id="myElement" style="display:none"></div>

If you wish to show the element again, any of these would work:

// JavaScript:
document.getElementById("myElement").style.display = "";

// jQuery:
$("#myElement").toggle(); // if currently hidden
$("#myElement").show();
$("#myElement").css({"display":""});

These remove the display CSS property from the inline style property:

<div style=""></div>

Since the inline style no longer specifies a display, the <div> goes back to being displayed as table, since that's what we put in the style sheet. The <div> does not revert to being displayed as block because our CSS overrode that default setting; blanking out the inline display property does not negate the rules in our style sheets.

For giggles, here's the Google query I used for verification of my answer: javascript style display empty string default

...and a couple of links where this is mentioned:

http://jszen.blogspot.com/2004/07/table-rowsrevealed.html

http://www.harrymaugans.com/2007/03/05/how-to-create-a-collapsible-div-with-javascript-and-css/ (not in the article, but in the comments section)

It sets the display style to the default value for that element. For most elements if not all, the default value is something other than none.

It removes the value for the display property so that the default value is used.

It does not reset the original display property.

If you for example have this:

<span id="test" style="display:block;">b</span>

And do this:

document.getElementById('test').style.display = 'inline';
document.getElementById('test').style.display = '';

the display style used for the element ends up being inline because that's the default for the element, it is not reset back to the style specified in the HTML code.

It sets the css for that element's display to null which essentially wipes out what was set and it reverts to its default value.