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

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

Допустим, у вас есть <div>элемент с некоторым содержанием внутри. Этот контент внутри будет растягивать высоту <div>. Как вы получаете «визуализированную» высоту, если вы явно не установили высоту. Очевидно, я попытался:

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

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

Должно быть просто

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

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

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

.style.height

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

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

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

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

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

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

НЕТ JQUERY, так как elem.style.heightв верхней части этих ответов была куча ссылок ...

ВНУТРЕННЯЯ ВЫСОТА:
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/

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

Я использую это, чтобы получить высоту элемента (возвращает float) :

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

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

this.$refs['some-ref'].getBoundingClientRect().height

style = window.getComputedStyle(your_element);

тогда просто: style.height

Обязательно используйте

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

или

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

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

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

• Я использовал старый добрый прием использования отладчика, чтобы «посмотреть», какие свойства имеет мой элемент
• Я видел, какое из них имеет значение, которое я ожидал
• Это был offsetHeight - так что я использовал это.
• Тогда я понял, что это не работает со скрытым 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, я предлагаю вам взглянуть.

document.querySelector('.project_list_div').offsetHeight;

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

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

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

<body onload='anyName()'>

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

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?

Я думаю, что лучший способ сделать это в 2020 году - это использовать обычный JS и getBoundingClientRect().height;

Вот пример

let div = document.querySelector('div');
let divHeight = div.getBoundingClientRect().height;

console.log(`Div Height: ${divHeight}`);

<div>
  How high am I? 🥴
</div>

Помимо heightэтого, у нас также есть доступ к множеству других вещей о div.

let div = document.querySelector('div');
let divInfo = div.getBoundingClientRect();

console.log(divInfo);

<div>What else am I? 🥴</div>

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

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

У меня та же проблема по ряду элементов. На сайте нет ни 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.

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

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

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

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

* ОДНАКО * Ничего из этого не было необходимо. Фактически это работало как рекламируется и возвратило правильную высоту !!!

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

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

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

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

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

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

Иногда 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;
}

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

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

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

h теперь будет выглядеть как "53.825px".

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

С MooTools :

$('someDiv').getSize().y

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

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

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

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