Question

如何使用javascript检测DOM元素是阻止还是内联？

例如，是否有一个函数/属性为“<a>”标记返回“内联”（或“<p>”标记的“块”？

谢谢。

Answer 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

编辑

更新以优先考虑IE9中的标准合规性/ getComputedStyle()，它支持这两种方法。

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

Answer 3

考虑一个块元素可能已添加到包含display:none的类的dom中。在这种情况下，您需要知道该元素的默认值。以下代码获取元素（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 的nodeName和 display 属性调用它，该属性应该返回 block 或 inline

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

（对于IE浏览器，您需要使用currentStyle而不是getComputedStyle）

Answer 4

您需要的信息应该在样式中的display属性中。

element.style.display

当然，这会因浏览器的不同而异，我希望在javascript中使用它们。

检测DOM元素的内联/块类型

4 个答案: