Question

考虑遵循标记：

<div id="outerElement">
    <div id="innerElement" style="border: 1px solid blue; background-color: #f0f3f5; margin-top: 100px">  
        TESTE
    </div>
</div>

我想使用javascript 获得outerElement的实际最终高度。我注意到，如果我从innerElement移除垂直边距，我就可以得到我想要的但我不能在outerElement内改变样式。

我该怎么做？

观测值：我已经在所有浏览器中尝试过height，scrollheight和offsetHeight。 Chrome为scrollHeight提供了预期值（包括内部元素的边距）。所有其他浏览器都失败了。

Answer 1

我会使用jQuery。尝试使用

$("#myelementId").height()

看看是否可以。

Answer 2

添加clearfix，使用jquery height（）并再次删除clearfix类。

那会起作用。：）

Answer 3

尝试使用clientHeight

var outerElement = document.getElementById("outerElement");
if(outerElement.clientHeight) {
alert("Height is "+outerElement.clientHeight+"px");
}
else { alert("Old browser?"); }

我知道你在想什么......“这不行！”唉，它没有......但如果你做了一些事情，比如为outerElement增加一个边界...即使只是片刻......

var outerElement = document.getElementById("outerElement");
outerElement.style.border = "1px solid black";
var height = outerElement.clientHeight;
outerElement.style.border = "none";
alert("Height is "+height+"px");

不是最美丽的解决方案，但它有效，如果你能弄清楚为什么它可行（我肯定不知道：P）你可能更接近好解决方案......

有些旧的浏览器可能不支持它...你必须要调查它;我不能列出'em。

Answer 4

你可以使用jQuery：

$('#outerElement').height(); // gets the height of the div
$('#outerElement').outerHeight(); // gets the height of the div including margins and padding
$('#outerElement').innerHeight(); // gets the height of the div including padding

其中一个必然会起作用。

Answer 5

好吧也不漂亮，但这就是我的做法（免责声明：我曾经从某个地方偷过这个）

var height = elem.clientHeight + getBufferHeight(elem, true);

function getBufferHeight(elem, includeMargins) {
    if (!elem.visible()) {
        return 0;
    }
    //do new Number instead of parseFloat to avoid rounding errors 
    var result = 0;
    if (includeMargins) {
        result =   
            new Number(elem.getStyle('marginTop').replace(/[^\d\.]/g, '')).ceil() +  
            new Number(elem.getStyle('marginBottom').replace(/[^\d\.]/g, '')).ceil();
    }     
    result +=
        new Number(elem.getStyle('borderBottomWidth').replace(/[^\d\.]/g, '')).ceil() +
        new Number(elem.getStyle('borderTopWidth').replace(/[^\d\.]/g, '')).ceil() +    
        new Number(elem.getStyle('paddingTop').replace(/[^\d\.]/g, '')).ceil() +
        new Number(elem.getStyle('paddingBottom').replace(/[^\d\.]/g, '')).ceil();                        
    return result;
}

Answer 6

这是一个棘手的问题，因为你认为什么是“适当的”高度。内部的内容高度包括边框，填充或实际边际使用情况？一般来说，浏览器在大多数情况下表现得相当一致，但quirksmode可以清除您需要的内容。（作为提示，如果你需要使用实际的保证金，它会受到伤害）。

Answer 7

我猜你应该去抛出所有的元素属性并且只有这样才能知道确切的高度...但是在高度的情况下设置它例如clear：这两个属性我都不认为有可能知道一个元素的高度。

3秒的想法可能是这样的：

var o document.getElementById（'id'）。style;

    var total = ((o.height.split("px")[0] == "") ? 0 : o.height.split("px")[0]) +
 ((o.marginTop.split("px")[0] == "") ? 0 : o.marginTop.split("px")[0]) + 
((o.marginBottom.split("px")[0] == "") ? 0 : o.marginBottom.split("px")[0]) + 
((o.paddingTop.split("px")[0] == "") ? 0 : o.paddingTop.split("px")[0]) +
    ((o.borderTop.split("px")[0] == "") ? 0 : o.borderTop.split("px")[0]) +
 ((o.borderBottom.split("px")[0] == "") ? 0 : o.borderBottom.split("px")[0])

但我猜你还必须包含document.getElementById（'id'）。身高值如果有......那就是thougth但可以提供帮助..

best =）

Answer 8

警告警告clientHeight几乎有效，但不包括边距:(

我想补充说我今天一直在尝试这个，而nahumsilva＆amp; plodder几乎是正确的（nahumsilva的版本看起来更像是跨浏览器{plodder似乎不适用于Chrome / WebKit，但我不是这些东西的专家}），他们都错过了一个元素可能有计算出的样式元素，不是由它自己的样式定义的。

这让我疯了 - 我想知道我的<p>元素在哪里获得额外的16px边距高度 - 直到我意识到它来自计算机样式。

所以，长话短说，像nahumsilva / plodder这样的方法对我有用，附加条件是你应该用window.getComputedStyle( element, null )得到元素的计算样式，它返回一个CSSStyleDeclaration对象（如{ {1}}）。 element.style / element.offsetHeight应该给你没有边距的高度，所以整个事情看起来像：

element.clientHeight

Answer 9

尝试$("#myelementId").outerHeight( true )

Answer 10

如果您可以将外部div设置为样式display : inline-block;，则scrollHeight将包含子元素的边距。

如果您设置样式display : flex;（由IE 9 +支持）

，它也会起作用

Answer 11

这个答案可能有点明显，但如果您已经知道边距，为什么不手动将其添加到高度？

如何在考虑内部元素边缘的情况下获得DIV的高度？

11 个答案: