javascript - same - Detectar el tipo de línea/bloque de un elemento DOM

next class jquery

Question

¿Cómo detectar si un elemento DOM está bloqueado o en línea con javascript?

Por ejemplo, ¿hay una función / propiedad que devuelve ''en línea'' para una etiqueta '' <a> '' (o ''bloque'' para una etiqueta '' <p> '')?

Gracias.

Answer 1

La forma tradicional y bastante fea de hacer esto es consultar una lista de nombres de elementos para elementos a nivel de bloque:

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 2

La información que necesita debe estar en la propiedad de visualización dentro del estilo.

element.style.display

Por supuesto, esto variará entre los navegadores que espero como todo en javascript.

Answer 3

Puede ir con getComputedStyle() y currentStyle para obtener los estilos calculados para un elemento. Esto debería hacerlo:

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

Para ser un poco más claro, los estilos computados contienen valores para cada propiedad de estilo, incluso para aquellos que no tienen un conjunto de propiedades de estilo. Esos valores serán el valor predeterminado, por lo que en el caso de un elemento <a> , la display devolverá en 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;
}

Probado en las últimas versiones de Firefox, Chrome e IE7 / IE8.

Resultados:

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

Actualización: editado para dar preferencia a los estándares de cumplimiento / getComputedStyle() en IE9, que admite ambos métodos.

Answer 4

Tenga en cuenta que es posible que se haya agregado un elemento de bloque al dominio que contiene una clase con display:none . En ese caso, necesitarías saber el valor predeterminado para ese elemento. El siguiente código obtiene una configuración de estilo predeterminada para un elemento ( 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;
}

En este caso, llámelo usando el nombre de nodo de, por ejemplo, p y la propiedad de visualización que debería devolver el bloque o en línea

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

(Para los navegadores IE, debe usar currentStyle en lugar de getComputedStyle)