Inline/Block-Typ eines DOM-Elements erkennen

Question

Wie zu erkennen, ob ein DOM-Element ist Block oder Inline mit Javascript?

Gibt es zum Beispiel eine Funktion/Eigenschaft, die 'inline' für einen ' <a> Tag (oder 'Block' für ein ' <p> ' Tag)?

Ich danke Ihnen.

Answer 1

Sie können gehen mit getComputedStyle() y currentStyle um die berechneten Stile für ein Element zu erhalten. Dies sollte genügen:

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

Um es etwas deutlicher zu machen, enthalten berechnete Stile Werte für jede Stileigenschaft, auch für solche, für die keine Stileigenschaft festgelegt wurde. Diese Werte sind der Standardwert, so dass im Falle eines ungestylten <a> Element, display wird zurückgegeben 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;
}

Getestet im aktuellen Firefox, Chrome und IE7/IE8.

Ergebnisse:

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

Aktualisierung: bearbeitet, um der Einhaltung von Normen den Vorzug zu geben/ getComputedStyle() im IE9, der beide Methoden unterstützt.

Answer 2

Die traditionelle und ziemlich hässliche Methode, dies zu tun, besteht darin, eine Liste von Elementnamen für Elemente auf Blockebene zu konsultieren:

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);
}

Answer 3

Nehmen wir an, es wurde ein Blockelement zum Dom hinzugefügt, das eine Klasse mit display:none . In diesem Fall müssen Sie den Standardwert für dieses Element kennen. Der folgende Code ermittelt eine Standard-Stil-Einstellung für ein Element ( http://jsfiddle.net/jameswestgate/qBV5c/embedded/ ):

function getDefaultStyle(nodeName, property) {
    var div = document.createElement('div');
    div.setAttribute('style','position:absolute; left:-9999px;');

    var el = document.createElement(nodeName);
    div.appendChild(el);
    document.body.appendChild(div);

    var result = getComputedStyle(el, null).getPropertyValue(property);
    document.body.removeChild(div); 

    return result;
}

In diesem Fall rufen Sie es mit dem NodeName von z.B. p und die Anzeige Eigenschaft, die Folgendes zurückgeben sollte Block o Inline

getDefaultStyle('p', 'display'); //returns block

(Bei IE-Browsern müssen Sie currentStyle anstelle von getComputedStyle verwenden)