Как получить высоту DIV, рассмотрев поля внутреннего элемента?

Я бы использовал jQuery. Попробуйте использовать

$("#myelementId").height()

и посмотрите, помогает ли это.

вы можете использовать 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

один из них должен работать.

Попробуйте использовать 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), вы можете приблизиться к хорошему решению...

Некоторые старые браузеры могут не поддерживать это, хотя... вам придется поискать; я не могу их перечислить.

ок, тоже не очень красиво, но вот как я это делаю (отказ от ответственности: я украл это откуда-то однажды)

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

Это непростой вопрос: какую высоту вы считаете «подходящей»? Высота содержимого внутри, включая границы, как насчет заполнения или фактического использования полей? В целом браузер действует довольно последовательно по большинству вещей, но quirksmode может прояснить, что вам нужно. (В качестве подсказки, если вам нужна фактическая маржа, это будет больно).

Этот ответ может быть несколько очевиден, но если вы уже знаете поле, почему бы просто не добавить его вручную к высоте?

Думаю, вам следует бросить все свойства элемента и составить сумму только таким образом, чтобы вы могли точно знать высоту ... но в случае, если высота задается, например, clear: both property Я не думаю возможно узнать высоту элемента.

Трехсекундное мышление может выглядеть примерно так:

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'). Height если у вас есть .... это сложно, но может помочь ..

лучше всего =)

ПРЕДУПРЕЖДЕНИЕ ПРЕДУПРЕЖДЕНИЕ clientHeight почти работает, но не включает поля: (

Просто подумал, что добавлю, что пробовал это сегодня, и хотя nahumsilva и plodder почти правы (версия nahumsilva, похоже, более кроссбраузерна {plodder, похоже, не работает в Chrome / WebKit, но я не эксперт в этих вещах}), они оба пропустили это у элемента могут быть вычисленные элементы стиля, которые не определены его собственным стилем.

Это сводило меня с ума - мне было интересно, где мои

элементы получали дополнительные 16 пикселей высоты поля - пока я не понял, что это исходит из вычисляемого стиля.

Итак, короче говоря, подход вроде nahumsilva / plodder работал у меня с добавленной оговоркой, что вы должны получить вычисляемый стиль элемента с окном .getComputedStyle (element, null) , который возвращает объект CSSStyleDeclaration (например, element.style ). element.offsetHeight / element.clientHeight должен дать вам высоту без полей, поэтому все будет выглядеть так:

var cstyle = window.getComputedStyle( element, null );
var elementHeight = element.offsetHeight +
Number( cstyle.marginBottom.replace(/[^\d\.]/g, '') ) +
Number( cstyle.marginTop.replace(/[^\d\.]/g, '') );