Detect inline/block type of a DOM element

Question

How to detect whether a DOM element is block or inline with javascript?

For example, is there a function/property which returns 'inline' for a '<a>' tag (or 'block' for a '<p>' tag)?

Thank you.

Answer 1

You can go with getComputedStyle() and currentStyle to get the calculated styles for an element. This should do it:

function getDisplayType (element) {     var cStyle = element.currentStyle || window.getComputedStyle(element, "");      return cStyle.display; } 

To be a little clearer, computed styles contain values for every style property, even for those that don't have a style property set. Those values will be the default value so in the case of an unstyled <a> element, display will return inline:

function getElementDefaultDisplay(tag) {     var cStyle,         t = document.createElement(tag),         gcs = "getComputedStyle" in window;      document.body.appendChild(t);     cStyle = (gcs ? window.getComputedStyle(t, "") : t.currentStyle).display;      document.body.removeChild(t);      return cStyle; } 

Tested in latest Firefox, Chrome and IE7/IE8.

Results:

> getElementDefaultDisplay("a") inline > getElementDefaultDisplay("div") block 

Update: edited to give preference to standards compliance/getComputedStyle() in IE9, which supports both methods.

Answer 2

The traditional and rather ugly way of doing this is to consult a list of element names for block-level elements:

var blockRegex = /^(address|blockquote|body|center|dir|div|dl|fieldset|form|h[1-6]|hr|isindex|menu|noframes|noscript|ol|p|pre|table|ul|dd|dt|frameset|li|tbody|td|tfoot|th|thead|tr|html)$/i;  function isBlockLevel(el) {     return blockRegex.test(el.nodeName); }