Отримайте висоту діва за допомогою простого JavaScript

Будь-які ідеї, як досягти висоти діва без використання jQuery?

Я шукав переповнення стека для цього питання, і, здається, кожна відповідь вказує на jQuery .height().

Я спробував щось на кшталт myDiv.style.height, але нічого не повернулося, навіть коли мій дів був своїм 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 поверне порожню пряму, якщо відображення елемента "жодне".

Приклад:

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;

Ви, користувачі, що користуються: Ця відповідь допомогла щонайменше 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);