Düz JavaScript ile div yüksekliği elde edin

JQuery kullanmadan div yüksekliğini nasıl elde edeceğiniz hakkında herhangi bir fikir?

Bu soru için Stack Overflow arıyordum ve her cevap jQuery's işaret ediyor gibi görünüyor .height().

Ben böyle bir şey denedim myDiv.style.height, ama div benim widthve heightCSS ayarlanmış olsa bile, hiçbir şey geri döndü .

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

veya

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

clientHeight dolgu içerir.

offsetHeight dolgu, scrollBar ve kenarlıklar içerir.

jsFiddle

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

Başka bir seçenek getBoundingClientRect işlevini kullanmaktır. Öğenin ekranı 'none' ise getBoundingClientRect'in boş bir rekt döndüreceğini lütfen unutmayın.

Misal:

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 ve clientWidth aradığınız şeydir.

offsetHeight ve offsetWidth ayrıca yüksekliği ve genişliği döndürür, ancak kenarlık ve kaydırma çubuğunu içerir. Duruma bağlı olarak, birini veya diğerini kullanabilirsiniz.

Bu yardımcı olur umarım.

Diğer cevaplar benim için işe yaramıyordu. İşte w3schools'ta bulduğum şey div, bir heightve / veya widthset olduğunu varsayarak .

Tek ihtiyacınız olan heightve widthdolguyu dışlamak için.

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

Siz ineklerimiz: Bu cevap, aldığım upvotes ile değerlendirerek en az 5 kişiye yardımcı oldu. Eğer beğenmediysen, neden düzeltebileceğimi söyle. Bu benim downvotes ile benim en büyük evcil hayvan peeve; nadiren bana neden aşağı indirdiğini söylüyorsun.

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

Jsfiddle

Buna ek olarak el.clientHeightve öğenin içindeki içeriğin yüksekliğineel.offsetHeight ihtiyacınız olduğunda (öğenin kendisinde ayarlanan yüksekliğe bakılmaksızın) kullanabilirsiniz . Daha fazla bilgiel.scrollHeight

Eleman yüksekliğini veya maksimum yüksekliğini dahili dinamik içeriğinin tam yüksekliğine ayarlamak istiyorsanız bu yararlı olabilir. Örneğin:

var el = document.getElementById('myDiv')

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

Deneyin

myDiv.offsetHeight 

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

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

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

İşte bir alternatif daha:

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

    }

Seçeneklerden biri

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