it-swarm.com.ru

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

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

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

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

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

или же

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

clientHeight включает отступы.

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

497
Dan

jsFiddle

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

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

Пример:

var elem = document.getElementById("myDiv");
if(elem) {
   var rect = elem.getBoundingClientRect();
   console.log(rect.height);  
}
11
user4617883
var myDiv = document.getElementById('myDiv'); //get #myDiv
alert(myDiv.clientHeight);

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

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

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

9
Keo Strife

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

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

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

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

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

Jsfiddle

1
user3556121

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

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

    }
0
Pedro Coelho

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

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

var el = document.getElementById('myDiv')

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

пытаться

myDiv.offsetHeight 
console.log("Height:", myDiv.offsetHeight );
#myDiv { width: 100px; height: 666px; background: red}
<div id="myDiv"></div>
0
Kamil Kiełczewski