Obtenez la hauteur de div avec JavaScript simple

Des idées sur la façon d'obtenir la hauteur d'un div sans utiliser jQuery?

Je cherchais Stack Overflow pour cette question et il semble que chaque réponse pointe vers jQuery .height().

J'ai essayé quelque chose comme myDiv.style.height, mais il n'a rien retourné, même lorsque mon div avait son widthet heightdéfini en CSS.

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

ou

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

clientHeight comprend un rembourrage.

offsetHeight inclut le rembourrage, la barre de défilement et les bordures.

jsFiddle

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

Une autre option consiste à utiliser la fonction getBoundingClientRect. Veuillez noter que getBoundingClientRect retournera un rect vide si l'affichage de l'élément est «aucun».

Exemple:

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 et clientWidth sont ce que vous recherchez.

offsetHeight et offsetWidth renvoient également la hauteur et la largeur mais elles incluent la bordure et la barre de défilement. Selon la situation, vous pouvez utiliser l'un ou l'autre.

J'espère que cela t'aides.

Les autres réponses ne fonctionnaient pas pour moi. Voici ce que j'ai trouvé à w3schools , en supposant que le divhas a heightet / ou widthset.

Tout ce dont vous avez besoin est heightet widthd'exclure le rembourrage.

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

You downvoters: Cette réponse a aidé au moins 5 personnes, à en juger par les votes positifs que j'ai reçus. Si vous ne l'aimez pas, dites-moi pourquoi je peux le réparer. C'est ma plus grande bête noire avec des downvotes; vous me dites rarement pourquoi vous votez contre.

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

Jsfiddle

En plus de el.clientHeightet el.offsetHeight, lorsque vous avez besoin de la hauteur du contenu à l'intérieur de l'élément (quelle que soit la hauteur définie sur l'élément lui-même), vous pouvez l'utiliser el.scrollHeight. Plus d'informations

Cela peut être utile si vous souhaitez définir la hauteur ou la hauteur maximale de l'élément à la hauteur exacte de son contenu dynamique interne. Par exemple:

var el = document.getElementById('myDiv')

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

essayer

myDiv.offsetHeight 

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

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

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

Voici une autre alternative:

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

    }

Une option serait

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