Comment calculer la hauteur réelle d'une ligne en JavaScript ?

Détermination de la hauteur de ligne réelle avec JavaScript

Dans le développement Web, il est essentiel de comprendre la hauteur de ligne réelle d'un élément, en particulier lorsque vous travaillez avec du contenu textuel. Bien que la propriété style.lineHeight fournisse la hauteur de ligne définie par CSS, la hauteur de ligne réelle peut parfois différer en raison de l'absence de règles CSS spécifiques.

Calcul de la hauteur de ligne réelle

À Pour calculer la hauteur de ligne réelle d'un élément à l'aide de JavaScript, nous pouvons utiliser la propriété .clientHeight. Cette approche n'est pas entièrement fiable, mais elle offre une méthode pratique pour déterminer la hauteur de ligne en l'absence de définitions CSS.

Implémentation du code

L'extrait de code suivant montre comment calculer la hauteur réelle line-height utilisant .clientHeight :

function getLineHeight(el) {
    var temp = document.createElement(el.nodeName), ret;
    temp.setAttribute("style", "margin:0; padding:0; "
        + "font-family:" + (el.style.fontFamily || "inherit") + "; "
        + "font-size:" + (el.style.fontSize || "inherit"));
    temp.innerHTML = "A";

    el.parentNode.appendChild(temp);
    ret = temp.clientHeight;
    temp.parentNode.removeChild(temp);

    return ret;
}

Explication

La fonction fonctionne en clonant les propriétés de l'élément cible dans un élément temporaire. En affichant un seul caractère (« A ») dans l'élément temporaire, il imite efficacement le comportement de hauteur de ligne de l'élément d'origine. La valeur clientHeight de cet élément temporaire est ensuite capturée comme hauteur de ligne réelle. Enfin, l'élément temporaire est supprimé du DOM.

Conclusion

Cette méthode fournit un moyen fiable de déterminer la hauteur de ligne réelle d'un élément en JavaScript, quelles que soient les définitions CSS existantes. C'est particulièrement utile pour le contenu dynamique où le contrôle CSS peut ne pas être réalisable.

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!