web-dev-qa-db-fra.com

Obtenir une hauteur div avec JavaScript

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

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

J'ai essayé quelque chose comme myDiv.style.height, mais il n'a rien retourné, même si ma div avait ses width et height en CSS.

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

ou

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

clientHeight inclut le remplissage.

offsetHeight comprend le remplissage, la barre de défilement et les bordures.

517
Dan

jsFiddle

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

Une autre option consiste à utiliser la fonction getBoundingClientRect. Notez que getBoundingClientRect renverra un rect vide si l'affichage de l'élément est 'none'.

Exemple:

var elem = document.getElementById("myDiv");
if(elem) {
   var rect = elem.getBoundingClientRect();
   console.log(rect.height);  
}
14
user4617883
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 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.

10
Keo Strife

Les autres réponses ne fonctionnaient pas pour moi. Voici ce que j'ai trouvé à w3schools , en supposant que la div possède un ensemble height et/ou width.

Tout ce dont vous avez besoin est height et width pour exclure le remplissage.

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

Vous, votants descendants: 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 les votes négatifs; vous me dites rarement pourquoi vous en votez.

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

Jsfiddle

1
user3556121

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

    }
1
Pedro Coelho

En plus de el.clientHeight et 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 utiliser el.scrollHeight. plus d'infos

Cela peut être utile si vous souhaitez définir la hauteur d'élément 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'
0
cronoklee

essayer

myDiv.offsetHeight 

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