Как вы получаете, оказываемых высоту элемента?

Как вы получаете, оказываемых высоту элемента?

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

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

Есть трюк для этого? Я с помощью jQuery, если это помогает.

Комментарии к вопросу (1)

Попробуйте один из:

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

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

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

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

Комментарии (6)
Решение

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

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

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

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

.style.height

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

Комментарии (8)

Не на jQuery так как там было куча ссылок с помощью Элем.стиль.высота в верхней части эти ответы...

ВНУТРЕННЯЯ ВЫСОТА: https://developer.mozilla.org/en-US/docs/Web/API/Element.clientHeight

document.getElementById(id_attribute_value).clientHeight;

ВНЕШНЯЯ ВЫСОТА: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetHeight

document.getElementById(id_attribute_value).offsetHeight; 

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

Комментарии (0)

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

Это даст вам полный оказанные высоту элемента. Кроме того, вы Дон'т нужна, чтобы установить какой-либо УСБ-высоты элемента. Для Примечание Вы можете сохранить его высоты авто так это может быть представлено как в содержание'с высоты.

//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'с сайта или развернутый пост здесь.

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

Комментарии (4)

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

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

Он также работает, когда вы используете виртуальный дом. Я использую его в Vue такой:

this.$refs['some-ref'].getBoundingClientRect().height
Комментарии (0)
style = window.getComputedStyle(your_element);

тогда просто: стиль.высота

Комментарии (0)

Наверняка использовать

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

или

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

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

Я чуть не попал в ловушку, только теперь через offsetHeight. Вот что получилось :

  • Я использовал старый добрый трюк с помощью отладчика 'часы' какие свойства своей стихии и
  • Я увидел, что один имеет значение значение я ожидал
  • Он был offsetHeight - так я привык к этому.
  • Тогда я понял, что он не работал с скрытом div
  • Я пытался скрываться после расчета значение maxheight, но это смотрелось топорно - попал в историю.
  • Я сделал поиск - обнаружен в jQuery.высота() - и использовал его
  • узнала высота() работает даже на скрытые элементы
  • просто для удовольствия я проверил реализацию на jQuery высота/ширина

Здесь's просто часть его :

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 методов в последнее время я предлагаю вам взглянуть.

Комментарии (1)

Я сделал простой код, который не'т даже нужно jQuery и, возможно, поможет некоторым людям. Это становится общая высота 'типа id1' после загрузки и использовать его на 'ID2, которое'

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

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

Комментарии (1)

Тю мы можем сделать геометрию элемента...

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 ?

Комментарии (0)

Так что это ответ?

"Если вам нужно что-то подсчитать, но не показать его, выберите элемент видимость:скрытый " и " положение:абсолютный, добавить его в DOM-дерево, получить offsetHeight и снимите ее. (Что's что библиотеку Prototype, совсем в тылу в последний раз я проверил).&и"

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

// 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 базы и ноль в смещение и высоту прокрутки. Затем я попробовал добавить раствор и clientRects дом, чтобы увидеть, если он работает здесь.

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

  1. clientHeight тоже был 0.

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

  3. ClientRects возвращает результат практически идентична технике дом.

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

Я добавил несколько снимков, чтобы проиллюстрировать, как высота рассчитывается по-разному.

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

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

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

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

Это проиллюстрировано на следующем рисунке (взято из хром после работы.)

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

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

Комментарии (0)

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

Если вам нужно что-то подсчитать, но не показать его, выберите элемент видимость:скрытый " и " положение:абсолютный, добавить его в DOM-дерево, получить offsetHeight, и удалить его. (Что's что библиотеку Prototype делает за кулисами в последний раз я проверил).

Комментарии (2)

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

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;
}
Комментарии (5)

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

Без jQuery, вы можете проверить коробка-размеров и различных прокладок + границ + clientHeight, or вы можете использовать getComputedStyle](https://developer.mozilla.org/en-US/docs/Web/API/Window.getComputedStyle):

ВАР ч = getComputedStyle(документ.метода getElementById('someDiv')).высота;

ч теперь будет строку как-то "Военторга&quotбыл 53.825;.

И я могу'т найти ссылку, но я думаю, что я слышал getComputedStyle()может быть дорогим, поэтому он&#39;ов, наверное, не то, что вы хотите звонить на каждом окне.событие onscroll (но потом, не такое jQuery'высоты s ()).

Комментарии (1)

С В MooTools:

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

Комментарии (0)

Если я правильно понял ваш вопрос, то, возможно, что-то вроде этого поможет:

function testDistance(node1, node2) {
    /* get top position of node 1 */
    let n1Pos = node1.offsetTop;
    /* get height of node 1 */
    let n1Height = node1.clientHeight;
    /* get top position of node 2 */
    let n2Pos = node2.offsetTop;
    /* get height of node 2 */
    let n2Height = node2.clientHeight;

    /* add height of both nodes */
    let heightTogether = n1Height + n2Height;
    /* calculate distance from top of node 1 to bottom of node 2 */
    let actualDistance = (n2Pos + n2Height) - n1Pos;

    /* if the distance between top of node 1 and bottom of node 2
       is bigger than their heights combined, than there is something between them */
    if (actualDistance > heightTogether) {
        /* do something here if they are not together */
        console.log('they are not together');
    } else {
        /* do something here if they are together */
        console.log('together');
    } 
}
Комментарии (0)

Вы установить высоту в CSS конкретно? Если вы еще'т вы должны использовать offsetHeight; скорее, чем высота

var h = document.getElementById('someDiv').style.offsetHeight;
Комментарии (1)