Comment obtenir la hauteur de l'élément en ligne avec js, comme l'élément span?

Question

var mySpan=document.getElementById("mySpan"); 
 
alert(mySpan.height);

<span id="mySpan" style="line-height:200px;">hello world</span>

Mais je reçois undefined. Le Javascript peut seulement obtenir la taille d'élément de bloc ou de bloc en ligne.

Answer 1

Pour les éléments en ligne (et bloquer ainsi), vous pouvez utiliser offsetHeight. Cela inclura le remplissage vertical et les bordures ainsi: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight

Answer 2

Utilisez window.getComputedStyle(mySpan).lineHeight pour obtenir la valeur de hauteur de ligne de l'élément, que le style soit défini en ligne ou dans un fichier CSS externe.

var mySpan=document.getElementById("mySpan"); 
 
console.log(window.getComputedStyle(mySpan).lineHeight);

<span id="mySpan" style="line-height:200px;">hello world</span>

Answer 3

Les propriétés CSS avec un - sont représentées dans camelCase dans les objets Javascript. Ex - mySpan.style.lineHeight.

Vous pouvez également utiliser la notation de parenthèse pour accéder à la propriété. Ex - mySpan.style['line-height']

var mySpan=document.getElementById("mySpan"); 
 
console.log(mySpan.style.lineHeight); 
 
console.log(mySpan.style['line-height']);

<span id="mySpan" style="line-height:200px;">hello world</span>