Maison > interface Web > tutoriel CSS > le corps du texte

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

Linda Hamilton
Libérer: 2024-11-08 02:48:02
original
454 Les gens l'ont consulté

How to Find the Actual Line-Height of a DIV in JavaScript When No CSS Rule Exists?

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;
}
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal