#280 ✓invalid
ronin-28987 (at lighthouseapp)

A way to get the browsers default value for style.display of any given element

Reported by ronin-28987 (at lighthouseapp) | August 14th, 2008 @ 03:19 PM

An element hidden by display: none in a stylesheet can currently not be shown using Element.show(), because setting display to '' still hides it in the stylesheet.

But we can find out the default value for display a browser uses for a certain element by creating such an element, append it to the dom and use getStyle

Example:

getDefaultDisplay: function(element) { var container = document.createElement('div'); // This element is needed as appender, but it doesn't need to be appended to something var tester = Element.extend(document.createElement(element.tagName) ); container.appendChild(tester); // only by appending an element gets the proper style.display property return tester.getStyle('display'); }

Comments and changes to this ticket

  • ronin-28987 (at lighthouseapp)

    ronin-28987 (at lighthouseapp) August 14th, 2008 @ 03:21 PM

    An element hidden by display: none in a stylesheet can currently not be shown using Element.show(), because setting display to '' still hides it in the stylesheet.

    But we can find out the default value for display a browser uses for a certain element by creating such an element, append it to the dom and use getStyle

    Example:

    
    getDefaultDisplay: function(element) { var container = document.createElement('div'); // This element is needed as appender, but it doesn't need to be appended to something var tester = Element.extend(document.createElement(element.tagName) ); container.appendChild(tester); // only by appending an element gets the proper style.display property return tester.getStyle('display'); }
    
  • ronin-28987 (at lighthouseapp)

    ronin-28987 (at lighthouseapp) August 14th, 2008 @ 03:23 PM

    An element hidden by display: none in a stylesheet can currently not be shown using Element.show(), because setting display to '' still hides it in the stylesheet.

    But we can find out the default value for display a browser uses for a certain element by creating such an element, append it to the dom and use getStyle

    Example:

    
    getDefaultDisplay: function(element) {
       var container = document.createElement('div'); // This element is needed as appender, but it doesn't need to be appended to something
       var tester = Element.extend(document.createElement(element.tagName) ); container.appendChild(tester); // only by appending an element gets the proper style.display property
       return tester.getStyle('display');
    }
    
  • ronin-28987 (at lighthouseapp)

    ronin-28987 (at lighthouseapp) August 14th, 2008 @ 03:23 PM

    An element hidden by display: none in a stylesheet can currently not be shown using Element.show(), because setting display to '' still hides it in the stylesheet.

    But we can find out the default value for display a browser uses for a certain element by creating such an element, append it to the dom and use getStyle

    Example:

    
    getDefaultDisplay: function(element) {
       var container = document.createElement('div'); // This element is needed as appender, but it doesn't need to be appended to something
       var tester = Element.extend(document.createElement(element.tagName) );
       container.appendChild(tester); // only by appending an element gets the proper style.display property
       return tester.getStyle('display');
    }
    
  • Tobie Langel

    Tobie Langel August 14th, 2008 @ 06:58 PM

    • State changed from “new” to “invalid”

    This issue has been popping up every three months on the bug tracker. So much so that I ended up writing a post about it. FWIW, HTML5 does include a new attribute which solves this issue.

    Unfortunately your proposition doesn't work as it fails to take into account potential changes to the element's default display property caused by other CSS rules, e.g.:

    
    ul#menu li {
      display: inline
    }
    ul#menu li.last {
      display: none
    }
    
    
      $$('ul#menu li.last')[0].getDefaultDisplay();
      // -> "list-item"
      // -> which is wrong, the correct value should be "inline".
    

    I'm closing this as invalid.

  • Tobie Langel

    Tobie Langel July 24th, 2009 @ 02:10 AM

    • Tag changed from dom, element, needs_patch, needs_tests to element, needs_patch, needs_tests, section:dom

    [not-tagged:"dom" tagged:"section:dom" bulk edit command]

  • Tobie Langel

    Tobie Langel July 24th, 2009 @ 02:11 AM

    • Tag changed from element, needs_patch, needs_tests, section:dom to needs_patch, needs_tests, section:dom

    [not-tagged:"element" bulk edit command]

  • Tobie Langel

    Tobie Langel July 24th, 2009 @ 02:26 AM

    • Tag changed from needs_patch, needs_tests, section:dom to missing:tests, needs_patch, section:dom

    [not-tagged:"needs_tests" tagged:"missing:tests" bulk edit command]

  • Tobie Langel

    Tobie Langel July 24th, 2009 @ 02:28 AM

    • Tag changed from missing:tests, needs_patch, section:dom to missing:patch, missing:tests, section:dom

    [not-tagged:"needs_patch" tagged:"missing:patch" bulk edit command]

  • Tobie Langel

    Tobie Langel July 24th, 2009 @ 03:36 AM

    • Tag changed from missing:patch, missing:tests, section:dom to missing:patch, needs:tests, section:dom

    [not-tagged:"missing:tests" tagged:"needs:tests" bulk edit command]

  • Tobie Langel

    Tobie Langel July 24th, 2009 @ 03:37 AM

    • Tag changed from missing:patch, needs:tests, section:dom to needs:patch, needs:tests, section:dom

    [not-tagged:"missing:patch" tagged:"needs:patch" bulk edit command]

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile ยป

The Prototype JavaScript library.

Shared Ticket Bins

People watching this ticket

Pages