defaut display value of any DOM element

library authors have long been struggling to find a bullet proof function that will give the default display value of any DOM element. Average Web developer shouldn’t worry about it, but the solution had to be logged somewhere on the internet.

Consider the following kind of code:

The library used for animation will have to set the display value of the address to something else than none before animating it’s opacity from 0 to 1.

What should this display value be?

One way would be to use a hash object to store the default display value of elements:

var defaultDisplay = {
  div: "block",
  span: "inline",
  p: "block",
  b: "inline",
  td: "table-cell",
  ...
}

But this object would be rather large, considering the list of HTML5 elements. It can also be guaranteed that some day, other elements will be added to this list, and the library would be incompatible with it. The solution found in most libraries is similar to this one:

However, this function fails with the code found in the first snippet, as it will return “none” for any address, figcaption, mark or ruby inserted in this document, because that’s what the CSS says!

iframe to the rescue

In jQuery, we resorted to use an iframe to sandbox the dummy elements we create: the iframe hosts a completely different document, and the elements you append to it are not affected by the original CSS.

It should be noted that creating an iframe is a very expensive operation: on my 3 years old laptop running Firefox4 for Ubuntu, it takes up to 17ms to check the default display value of an element. This is mitigated by trying to use the classical code first (which executes in a fraction of that) and caching the output of the function.

7 thoughts on “defaut display value of any DOM element

    1. louisremi Post author

      In this example, the page is polluted with an aggressive CSS rule: all will be “display: none;” by default. But if you create an address element in an iframe, it won’t be affected by this rule.

    1. louisremi Post author

      It depends what you call “fail”. defaultDisplay() is only used when you want to display an element that was “display: none;”.
      In this case, if the developer chose to display the divs inline, there is no reason to return something else than inline.
      If you really need to know the default display of the element regardless of any CSS, you should only use the slow iframe code.

  1. Dan G. Switzer, II

    @louisremi:

    It would seem that you could improve performance a bit by pre-caching common elements. Since probably a vast majority of operations occur on the div and span elements, seems like pre-caching those elements would gain some performance improvements that could be noticeable on older PCs and mobile devices.

    1. louisremi Post author

      Sure, pre-caching could speed-up the function a bit. But you can’t really tell on which elements it is going to be used.
      And pre-caching only span and div is not going to make any noticeable difference.

Comments are closed.