Обнаружение встроенного/блочного типа элемента DOM

Ответ 1

Вы можете перейти с getComputedStyle() и currentStyle для получения вычисленных стилей для элемента. Это должно сделать это:

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

Чтобы быть немного яснее, вычисленные стили содержат значения для каждого свойства стиля, даже для тех, у которых нет набора свойств стиля. Эти значения будут значением по умолчанию, поэтому в случае незанятого элемента <a> display вернет 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;
}

Протестировано в последних версиях Firefox, Chrome и IE7/IE8.

Результаты:

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

Обновление: отредактировано, чтобы отдать предпочтение соблюдению стандартов / getComputedStyle() в IE9, который поддерживает оба метода.

Ответ 2

Традиционный и довольно уродливый способ сделать это - проконсультироваться со списком имен элементов для элементов уровня блока:

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

Ответ 3

Учтите, что элемент блока может быть добавлен в dom, содержащий класс с display:none. В этом случае вам нужно знать значение по умолчанию для этого элемента. Следующий код получает настройку стиля по умолчанию для элемента (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;
}

В этом случае вызовите его, используя имя узла, например, p и свойство отображения, которое должно возвращать блок или встроенный

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

(Для браузеров IE вам нужно использовать currentStyle вместо getComputedStyle)

Ответ 4

необходимая информация должна быть в свойстве отображения в стиле.

element.style.display

Конечно, это будет варьироваться в зависимости от браузеров, которые я ожидаю, как everyhting в javascript.