Как получить отображаемую высоту элемента?

как вы получаете отображаемую высоту элемента?

допустим, у вас есть <div> элемент с каким-то содержимым внутри. Это содержимое внутри собирается растянуть высоту <div>. Как вы получаете высоту "визуализации", Если вы явно не установили высоту. Очевидно, я попытался: 

var h = document.getElementById('someDiv').style.height;

есть ли трюк для этого? Я использую jQuery, если это поможет.

287
css height javascript jquery

16 ответов

Это должно быть просто

$('#someDiv').height();

С помощью jQuery. Это возвращает высоту первого элемента в обернутом наборе в виде числа.

пытаюсь использовать

.style.height

работает только если вы установили свойство в первую очередь. Не очень полезно!

153

попробуй:

var h = document.getElementById('someDiv').clientHeight;
var h = document.getElementById('someDiv').offsetHeight;
var h = document.getElementById('someDiv').scrollHeight;

clientHeight включает высоту и вертикальную прокладку.

offsetHeight включает высоту, вертикальную прокладку и вертикальные границы.

scrollHeight включает высоту содержащегося документа (будет больше, чем просто высота в случае прокрутки), вертикальное заполнение и вертикальные границы.

963

NON JQUERY так как была куча ссылок с использованием elem.style.height в верхней части эти ответы...

ВНУТРЕННИЙ HEIGHT:
https://developer.mozilla.org/en-US/docs/Web/API/Element.clientHeight 

document.getElementById(id_attribute_value).clientHeight;

НАРУЖНЫЙ HEIGHT:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetHeight

document.getElementById(id_attribute_value).offsetHeight;

или одна из моих любимых ссылок: http://youmightnotneedjquery.com/

127

можно использовать .outerHeight() для этой цели.

это даст вам полную визуализированную высоту элемента. Кроме того, вам не нужно устанавливать каких-либо css-height элемента. Для предосторожности вы можете сохранить свою высоту авто таким образом, он может быть отображен в соответствии с высотой контента.

//if you need height of div excluding margin/padding/border
$('#someDiv').height();

//if you need height of div with padding but without border + margin
$('#someDiv').innerHeight();

// if you need height of div including padding and border
$('#someDiv').outerHeight();

//and at last for including border + margin + padding, can use
$('#someDiv').outerHeight(true);

для четкого представления этих функций вы можете перейти на сайт jQuery или подробный пост здесь.

ясно разница между .height() / innerHeight() / outerHeight()

43
style = window.getComputedStyle(your_element);

потом просто: style.height

20

использовать 

$('#someDiv').height()   // to read it

или

$('#someDiv').height(newHeight)  // to set it

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

я почти попал в ловушку только что использования offsetHeight. Вот что случилось:--4-->

  • я использовал старый добрый трюк использования отладчика, чтобы "смотреть", какие свойства имеет мой элемент
  • я видел, какой из них имеет значение вокруг значения, которое я ожидал
  • это был офсет-так что я использовал это.
  • затем я понял, что он не работает со скрытым DIV
  • я попытался спрятаться после расчета maxHeight, но это выглядело неуклюже - попал в беспорядок.
  • я сделал поиск-обнаружил jQuery.высота() - и использовал его
  • обнаружил, что height () работает даже на скрытых элементах
  • просто для удовольствия я проверил реализацию jQuery высоты / ширины

вот только часть его :

Math.max(
Math.max(document.body["scroll" + name], document.documentElement["scroll" + name]),
Math.max(document.body["offset" + name], document.documentElement["offset" + name])
)

Юп выглядит как прокрутка и смещение. Если это не удается, это выглядит еще дальше, учитывая проблемы совместимости браузера и css. Другими словами, вещи, которые меня не волнуют - или хотят волновать.

но я не должен. Спасибо на jQuery!

мораль истории: если у jQuery есть метод для чего-то, вероятно, по уважительной причине, вероятно, связанной с совместимостью.

Если вы не читали через jQuery список методов недавно я предлагаю вам взглянуть.

13

Я сделал простой код, который даже не нуждается в JQuery и, вероятно, поможет некоторым людям. Он получает общую высоту " ID1 "после загрузки и использует ее на "ID2"

function anyName(){
    var varname=document.getElementById('ID1').offsetHeight;
    document.getElementById('ID2').style.height=varname+'px';
}

затем просто установите тело, чтобы загрузить его

<body onload='anyName()'>
11

это ответ?

" Если вам нужно вычислить что-то, но не показать его, установите элемент в visibility:hidden и position:absolute, добавьте его в дерево DOM, получите смещение и удалите его. (Это то, что делает библиотека прототипов за линиями в последний раз, когда я проверял)."

у меня такая же проблема с рядом элементов. На сайте нет jQuery или прототипа, но я все за то, чтобы заимствовать технику, если она работает. В качестве примера некоторых вещи, которые не сработали, а затем что сделали, у меня есть следующий код:

// Layout Height Get
function fnElementHeightMaxGet(DoScroll, DoBase, elementPassed, elementHeightDefault)
{
    var DoOffset = true;
    if (!elementPassed) { return 0; }
    if (!elementPassed.style) { return 0; }
    var thisHeight = 0;
    var heightBase = parseInt(elementPassed.style.height);
    var heightOffset = parseInt(elementPassed.offsetHeight);
    var heightScroll = parseInt(elementPassed.scrollHeight);
    var heightClient = parseInt(elementPassed.clientHeight);
    var heightNode = 0;
    var heightRects = 0;
    //
    if (DoBase) {
        if (heightBase > thisHeight) { thisHeight = heightBase; }
    }
    if (DoOffset) {
        if (heightOffset > thisHeight) { thisHeight = heightOffset; }
    }
    if (DoScroll) {
        if (heightScroll > thisHeight) { thisHeight = heightScroll; }
    }
    //
    if (thisHeight == 0) { thisHeight = heightClient; }
    //
    if (thisHeight == 0) { 
        // Dom Add:
        // all else failed so use the protype approach...
        var elBodyTempContainer = document.getElementById('BodyTempContainer');
        elBodyTempContainer.appendChild(elementPassed);
        heightNode = elBodyTempContainer.childNodes[0].offsetHeight;
        elBodyTempContainer.removeChild(elementPassed);
        if (heightNode > thisHeight) { thisHeight = heightNode; }
        //
        // Bounding Rect:
        // Or this approach...
        var clientRects = elementPassed.getClientRects();
        heightRects = clientRects.height;
        if (heightRects > thisHeight) { thisHeight = heightRects; }
    }
    //
    // Default height not appropriate here
    // if (thisHeight == 0) { thisHeight = elementHeightDefault; }
    if (thisHeight > 3000) {
        // ERROR
        thisHeight = 3000;
    }
    return thisHeight;
}

который в основном пытается все и все, чтобы получить нулевой результат. ClientHeight без аффекта. С проблемными элементами я обычно получаю NaN в базе и ноль в высотах смещения и прокрутки. Затем я попробовал добавить решение DOM и clientRects, чтобы узнать, работает ли оно здесь.

29 июня 2011, Я действительно обновил код, чтобы попытаться добавить в DOM и clientHeight с лучшими результаты, чем я ожидал.

1) clientHeight также был 0.

2) Дом на самом деле дал мне высоту, которая была отличной.

3) ClientRects возвращает результат, почти идентичный методу DOM.

поскольку добавленные элементы являются текучими по своей природе, когда они добавляются к пустому элементу DOM Temp, они отображаются в соответствии с шириной этого контейнера. Это становится странным, потому что это 30px короче, чем в конечном итоге заканчивается вверх.

я добавил несколько снимков, чтобы показать, как высота рассчитывается по-разному. Menu block rendered normallyMenu block added to DOM Temp element

различия в высоте очевидны. Я мог бы, конечно, добавить абсолютное позиционирование и скрытый, но я уверен, что это не будет иметь никакого эффекта. Я по-прежнему был убежден, что это не сработает!

(я отклоняюсь дальше) высота выходит (отображается) ниже, чем истинная отображаемая высота. Это можно решить, установив ширину элемента DOM Temp в соответствовать существующему родителю и может быть сделано довольно точно в теории. Я также не знаю, что произойдет в результате их удаления и добавления их обратно в существующее местоположение. Когда они пришли через технику innerHTML, я буду смотреть, используя этот другой подход.

* но * в этом не было необходимости. На самом деле он работал, как рекламируется, и вернул правильную высоту!!!

когда я смог получить меню видимым снова удивительно DOM вернул правильную высоту на макет жидкости в верхней части страницы (279px). Вышеуказанный код также использует getClientRects, которые возвращают 280px.

это показано на следующем снимке (взятом из Chrome после работы.)
enter image description here

Теперь у меня есть идея noooooo, почему этот прототип трюк работает, но кажется. Кроме того, getClientRects также работает.

Я подозреваю, что причиной всех этих проблем с этими конкретными элементами было использование innerHTML вместо appendChild, но это чистая спекуляция на данный момент.

7

Hm мы можем получить геометрию элемента...

var geometry;
geometry={};
var element=document.getElementById(#ibims);
var rect = element.getBoundingClientRect();
this.geometry.top=rect.top;
this.geometry.right=rect.right;
this.geometry.bottom=rect.bottom;
this.geometry.left=rect.left;
this.geometry.height=this.geometry.bottom-this.geometry.top;
this.geometry.width=this.geometry.right-this.geometry.left;
console.log(this.geometry);

Как насчет этого простого JS ?

6

offsetHeight, Как правило.

Если вам нужно вычислить что-то, но не показать его, установите элемент в visibility:hidden и position:absolute, добавьте его в дерево DOM, получите offsetHeight, и снять его. (Это то, что библиотека прототипов делает за кулисами в последний раз, когда я проверял).

5

иногда offsetHeight возвращает ноль, потому что созданный элемент еще не был отображен в Dom. Я написал эту функцию для таких обстоятельств:

function getHeight(element)
{
    var e = element.cloneNode(true);
    e.style.visibility = "hidden";
    document.body.appendChild(e);
    var height = e.offsetHeight + 0;
    document.body.removeChild(e);
    e.style.visibility = "visible";
    return height;
}
4

если вы уже используете jQuery, ваш лучший выбор .outerHeight() или .height(), как было заявлено.

без jQuery вы можете установить флажок-размер в использовании и добавить различные прокладки + границы + clientHeight,или можно использовать getComputedStyle:

var h = getComputedStyle (document.getElementById ('someDiv')).рост;

h теперь будет строка, подобная "53.825 px".

и я не могу найти ссылку, но Кажется, я слышал!--3--> может быть дорого, так что это, вероятно, не то, что вы хотите вызвать на каждом window.onscroll событие (но тогда и jQuery не является height()).

3

Я использую этот:

document.getElementById('someDiv').getBoundingClientRect().height
3

С MooTools:

$('someDiv').getsize не().y

1
document.querySelector('.project_list_div').offsetWidth;
-1

вы установили высоту в css специально? Если у вас нет, вам нужно использовать offsetHeight;, а не height

var h = document.getElementById('someDiv').style.offsetHeight;
-4