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

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

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

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

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

или

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

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

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

jsFiddle

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

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

Пример:

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

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

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

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

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

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

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

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

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

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

Jsfiddle

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

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

var el = document.getElementById('myDiv')

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

пытаться

myDiv.offsetHeight 

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

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

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

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

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

    }

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

const styleElement = getComputedStyle(document.getElementById("myDiv"));
console.log(styleElement.height);