Comment déterminer la hauteur de ligne réelle d'un DIV en JavaScript ?

Détermination de la hauteur de ligne réelle d'un élément DIV en JavaScript

De nombreux développeurs JavaScript recherchent souvent des méthodes pour déterminer la hauteur de ligne réelle d'un élément DIV, en excluant l'influence de Propriété CSS. Bien que style.lineHeight fournisse certaines informations, il repose sur l'existence d'une règle CSS.

Énoncé du problème

Étant donné un élément DIV sans hauteur de ligne définie par CSS , le défi consiste à trouver une solution JavaScript qui mesure avec précision la hauteur réelle de la ligne, quelles que soient les propriétés de la police. Cela garantit des résultats cohérents pour les éléments avec une longueur de contenu et des sauts de ligne variables.

Solution

L'approche la plus fiable et la plus efficace consiste à exploiter la propriété clientHeight. En créant un élément temporaire avec des propriétés de police et de taille identiques à celles de l'élément cible, nous pouvons extraire sa clientHeight. Cette valeur représente la hauteur de ligne réelle, y compris les marges verticales ou les espaces blancs au sein du DIV.

Voici un exemple d'implémentation :

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;
}

En "clonant" les propriétés de l'élément cible, cela La fonction génère un élément temporaire et mesure sa clientHeight. Cette technique fournit une représentation précise de la hauteur de ligne réelle, même dans des scénarios avec un contenu complexe ou des règles CSS manquantes.

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!