web-dev-qa-db-fra.com

Comment obtenir la hauteur de <div> dans la dimension px

J'ai utilisé la bibliothèque jQuery pour connaître la hauteur d'un div.

Ci-dessous, mon élément div avec ses attributs:

<DIV id="myDiv" style="height:auto; width:78;overflow:hidden"> Simple Test</DIV>

Ci-dessous mon code jQuery pour obtenir une hauteur de <div>

var result = $("#myDiv").css('height');
alert(result);

Après avoir exécuté la déclaration ci-dessus, le résultat est "auto". En fait c'est ce que je n'attendais pas, au lieu de cela je veux le résultat en dimension px.

javascriptjqueryhtmlcss
35
pravin

Utilisez .height() comme ceci:

var result = $("#myDiv").height();

Il y a aussi .innerHeight() et .outerHeight() en fonction de exactement ce que tu veux.

Vous pouvez le tester ici , jouez avec le padding/les marges/le contenu pour voir comment cela change.

66
Nick Craver

Bien qu'ils varient légèrement en ce qui concerne la façon dont ils récupèrent une valeur de hauteur, certains calculent l'élément entier, y compris le remplissage, la marge, la barre de défilement, etc., et d'autres calculent simplement l'élément dans sa forme brute.
Vous pouvez essayer ceux-ci:

javascript:

var myDiv = document.getElementById("myDiv");
myDiv.clientHeight;
myDiv.scrollHeight;
myDiv.offsetHeight;

ou en jquery:

$("#myDiv").height();
$("#myDiv").innerHeight();
$("#myDiv").outerHeight();
141
Shaoz

Utilisez height() :

var result = $("#myDiv").height();
alert(result);

Cela vous donnera la hauteur calculée en pixels sans unité. "px" sera supprimé du résultat. C'est à dire. si la hauteur est 400px, le résultat sera 400, mais le résultat sera en pixels.

Si vous voulez le faire sans jQuery, vous pouvez utiliser du JavaScript simple:

var result = document.getElementById("myDiv").offsetHeight;
30
djdd87

Pour ceux qui recherchent une solution JS simple:

let el = document.querySelector("#myElementId");

// including the element's border
let width = el.offsetWidth;
let height = el.offsetHeight;

// not including the element's border:
let width = el.clientWidth;
let height = el.clientHeight;

Découvrez cet article pour plus de détails.

1
user993683

Il existe une méthode intégrée pour obtenir le rectangle de délimitation: Element.getBoundingClientRect .

Le résultat est le plus petit rectangle qui contient l’élément entier, avec les valeurs en lecture seule gauche, haut, droit, bas, x, y, largeur et hauteur = propriétés.

Voir l'exemple ci-dessous:

let innerBox = document.getElementById("myDiv").getBoundingClientRect().height;
document.getElementById("data_box").innerHTML = "height: " + innerBox;
body {
  margin: 0;
}

.relative {
  width: 220px;
  height: 180px;
  position: relative;
  background-color: purple;
}

.absolute {
  position: absolute;
  top: 30px;
  left: 20px;
  background-color: orange;
  padding: 30px;
  overflow: hidden;
}

#myDiv {
  margin: 20px;
  padding: 10px;
  color: red;
  font-weight: bold;
  background-color: yellow;
}

#data_box {
  font: 30px arial, sans-serif;
}
Get height of <mark>myDiv</mark> in px dimension:
<div id="data_box"></div>
<div class="relative">
  <div class="absolute">
    <div id="myDiv">myDiv</div>
  </div>
</div>
0
Penny Liu