Получить высоту div с простым JavaScript

312

Любые идеи о том, как получить высоту div без использования JQuery?

Я искал Stack Overflow для этого вопроса, и кажется, что каждый ответ указывает на jQuery .height().

Я пробовал что-то вроде этого myDiv.style.height, но ничего не получалось, даже когда мой div был widthи heightнастроен на CSS.

lwiii
источник

Ответы:

587
var clientHeight = document.getElementById('myDiv').clientHeight;

или

var offsetHeight = document.getElementById('myDiv').offsetHeight;

clientHeight включает в себя набивку.

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

Дэн
источник
2
offsetheight не работает на ie10 ниже quirksmode.org/mobile/tableViewport_desktop.html
fearis
3
Вы также можете использовать, scrollHeightкоторый включает в себя высоту содержимого документа, вертикальные отступы и вертикальные границы.
Саид Зебардаст
5
clientHeightтакже включает отступы, так что это не эквивалентно$.height()
Eevee
2
границы и границы также занимают место. :) и ваш ответ подразумевает, clientHeightчто не включает отступы. и в вопросе упоминается и то $.height()и другое, и .style.heightни один из них не включает отступы, предполагая, что спрашивающий также не хочет этого.
Eevee
3
Примечание: OP не запрашивал ответы, исключающие заполнение . Не существует нативного кроссплатформенного решения для того, о чем я знаю.
Дан
23

jsFiddle

var element = document.getElementById('element');
alert(element.offsetHeight);
Даниэль Иммс
источник
22

Другой вариант - использовать функцию getBoundingClientRect. Обратите внимание, что getBoundingClientRect вернет пустой прямоугольник, если элемент отображает 'none'.

Пример:

var elem = document.getElementById("myDiv");
if(elem) {
   var rect = elem.getBoundingClientRect();
   console.log(rect.height);  
}
user4617883
источник
2
Я думаю, что это лучшее решение
Intervalia
11
var myDiv = document.getElementById('myDiv'); //get #myDiv
alert(myDiv.clientHeight);

clientHeight и clientWidth - это то, что вы ищете.

offsetHeight и offsetWidth также возвращают высоту и ширину, но включают границу и полосу прокрутки. В зависимости от ситуации, вы можете использовать один или другой.

Надеюсь это поможет.

Кео Страйф
источник
2

Другие ответы не работали на меня. Вот что я нашел в w3schools , предполагая, что у divнего есть heightи / или widthнабор.

Все, что вам нужно, это heightи widthисключить заполнение.

    var height = document.getElementById('myDiv').style.height;
    var width = document.getElementById('myDiv').style.width;

Вы, downvoters: Этот ответ помог по крайней мере 5 людям, судя по полученным мной голосам. Если вам это не нравится, скажите мне, почему я могу это исправить. Это моя самая большая любимая мозоль с отрицательными голосами; Вы редко говорите мне, почему вы отрицаете это.

вытягивали
источник
23
Это не будет работать, если у div нет набора heightи / илиwidth
hopkins-matt
1
Я думал, что это предполагалось и подразумевалось. Хотели бы вы, чтобы эта оговорка упоминалась в моем ответе?
вытолкнул
2
Лучше. Я лично не считаю другие методы не точными. Я бы рискнул сказать, что я использую offsetHeightи clientHeightчаще, чем style.height.
Хопкинс-Мэтт
1
Они не работали на меня. Вот почему я разместил этот ответ.
вытолкнул
1
Я не могу понять, как w3schools говорит, что другие методы не точны.
aknuds1
1
<div id="item">show taille height</div>
<script>
    alert(document.getElementById('item').offsetHeight);
</script>

Jsfiddle

user3556121
источник
1

В дополнение к el.clientHeightи el.offsetHeight, когда вам нужна высота содержимого внутри элемента (независимо от высоты, установленной для самого элемента), вы можете использовать el.scrollHeight. больше информации

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

var el = document.getElementById('myDiv')

el.style.maxHeight = el.scrollHeight+'px'
cronoklee
источник
Для всех, кто интересуется, это очень полезно делать CSS-переходы для выпадающих
меню,
1

Вот еще одна альтернатива:

var classElements = document.getElementsByClassName("className");

function setClassHeight (classElements, desiredHeightValue) 
    {
        var arrayElements = Object.entries(classElements);
        for(var i = 0; i< arrayElements.length; i++) {
            arrayElements[i][1].style.height = desiredHeightValue;
        }

    }
Педро Коэльо
источник
1

Один вариант будет

const styleElement = getComputedStyle(document.getElementById("myDiv"));
console.log(styleElement.height);
ШИВАНШ НАРАЯН
источник