Comment trouver la hauteur de ligne réelle d'un DIV en JavaScript lorsqu'aucune règle CSS n'existe ?

Trouver la hauteur de ligne réelle d'un DIV en JavaScript

En JavaScript, obtenir la hauteur de ligne d'un élément est simple via le propriété style.lineHeight. Cependant, cette approche repose sur l'existence d'une règle de style CSS précisant la hauteur de ligne. Lorsqu'une telle règle est absente, déterminer la hauteur de ligne réelle rendue d'un élément pose un défi différent.

La solution : utiliser ClientHeight

La hauteur de ligne réelle peut être déterminé avec précision à l'aide de la propriété clientHeight, car elle représente la hauteur calculée d'un élément, y compris le remplissage, mais pas la marge. La fonction JavaScript suivante illustre cette technique :

function getLineHeight(el) {
  // Create a temporary element to clone the target element's properties
  const temp = document.createElement(el.nodeName);

  // Override default styles to ensure consistent font properties
  temp.setAttribute("style", "margin:0; padding:0; font-family:" +
    (el.style.fontFamily || "inherit") + "; font-size:" +
    (el.style.fontSize || "inherit"));

  // Set the temporary element's content to "A"
  temp.innerHTML = "A";

  // Append the temporary element to the DOM
  el.parentNode.appendChild(temp);

  // Get the computed height of the temporary element
  const ret = temp.clientHeight;

  // Remove the temporary element
  temp.parentNode.removeChild(temp);

  // Return the computed height, which represents the actual line-height
  return ret;
}

Cette fonction clone efficacement les propriétés de l'élément cible dans un élément temporaire, qui est ensuite utilisé pour calculer la hauteur de ligne. En définissant les propriétés de police sur « hériter » dans l'élément temporaire, nous nous assurons qu'il adopte la même famille de police et la même taille que l'élément cible. Cette approche fournit une méthode fiable et cohérente pour déterminer la hauteur de ligne réelle rendue, quelle que soit la présence d'une règle de style CSS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!