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

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

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

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

Ответы

Ответ 1

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

или

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

clientHeight включает дополнение.

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

Ответ 2

jsFiddle

var element = document.getElementById('element');
alert(element.offsetHeight);

Ответ 3

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

Пример:

var elem = document.getElementById("myDiv");
if(elem) {
   var rect = elem.getBoundingClientRect();
   console.log(rect.height);  
}

Ответ 4

var myDiv = document.getElementById('myDiv'); //get #myDiv
alert(myDiv.clientHeight);

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

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

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

Ответ 5

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

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

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

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

Ответ 6

<div id="item">show taille height</div>
<script>
    alert(document.getElementById('item').offsetHeight);
</script>

Jsfiddle

Ответ 7

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

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

var el = document.getElementById('myDiv')

el.style.maxHeight = el.scrollHeight+'px'

Ответ 8

пытаться

myDiv.offsetHeight

console.log("Height:", myDiv.offsetHeight );

#myDiv { width: 100px; height: 666px; background: red}

<div id="myDiv"></div>

Ответ 9

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

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

    }