it-roy-ru.com

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

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

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

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

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

319
BuddyJoe

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

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

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

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

.style.height

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

158
Russ Cam

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

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

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

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

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

1039
strager

NON 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/

132
Jason Lydon

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

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

//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
open and free
style = window.getComputedStyle(your_element);

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

25
Feiteira

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

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

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

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

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

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

14
Simon_Weaver

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

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

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

<body onload='anyName()'>
11
Robuske

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

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?

7
Thomas Ludewig

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

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

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

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

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

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

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

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

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

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

7
DHorse

offsetHeight, обычно.

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

5
user58777

Иногда 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
Lonnie Best

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

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

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

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

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

3
chbrown

С MooTools:

$ ( 'SomeDiv'). GETSIZE (). У

1
kwcto

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

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
LuisBento
document.querySelector('.project_list_div').offsetWidth;
0
Ritwik