What does style.display = '' actually do?

Question

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:

<

Answer 1

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

with the ID of "myElement".

A

has a setting of display:block by default. In our style sheet, suppose we specify that your

is to be displayed as table:

div#myElement
{
    display:table;
}

Upon loading your page, the

is displayed as table. If you want to hide this

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

:

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:

Since the inline style no longer specifies a display, the

goes back to being displayed as table, since that's what we put in the style sheet. The

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)

0 讨论(0)

查看其它4个回答

发布评论:

提交评论

---

•  加载中...