Question

188

What does style.display = '' actually do?

rated 0 times [ 192] [ 4] / answers: 1 / hits: 57721 / 13 Years ago, wed, september 14, 2011, 12:00:00

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 search results.)

Thanks for any suggestions or links.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

margaritakristinak

Add To Favorites

Follow

Total Points: 502

Total Questions: 127

Total Answers: 98

Location: England

Member since Mon, May 17, 2021

3 Years ago

margaritakristinak questions

1 Parcel.js says to add the type=module attribute to the < script> tag but I've already added it

Thu, Mar 31, 22, 00:00, 2 Years ago

1 Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@babel/plugin-preset-react' imported from

Sun, Feb 20, 22, 00:00, 2 Years ago

1 Why is local storage deleted when I refresh the page?

Tue, May 11, 21, 00:00, 3 Years ago

1 Click event not firing on touchscreen when finger moves a bit

Tue, Oct 29, 19, 00:00, 5 Years ago

1 Nuxt.js: How to use the same page with different URLs and switch the components to be displayed according to the URL

Thu, Mar 28, 19, 00:00, 5 Years ago

View All

answered 13 Years ago ernest · Accepted Answer

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)