Comment trouver la véritable hauteur de ligne d'un DIV en JavaScript ?

Trouver la véritable hauteur de ligne des DIV en JavaScript

En JavaScript, il est souvent souhaitable de déterminer la hauteur de ligne réelle d'un DIV , plutôt que de s'appuyer sur les propriétés CSS. Ceci est particulièrement utile lorsque la hauteur de ligne n'est pas explicitement définie dans CSS.

Le défi

Les méthodes traditionnelles de vérification de l'attribut style.lineHeight fournissent l'attribut style.lineHeight défini par CSS. line-height, mais cette valeur peut ne pas refléter avec précision la hauteur de ligne réelle affichée sur la page.

La solution : utiliser ClientHeight

La solution réside dans l'utilisation de la propriété clientHeight. Cette propriété, qui mesure la hauteur d'un élément, y compris son remplissage et sa bordure, peut également être utilisée pour déterminer la hauteur de ligne d'un DIV dans les conditions suivantes :

• La famille de police et la taille de la police sont la même chose sur toutes les lignes.
• Il n'y a aucune propriété de hauteur de ligne supplémentaire appliquée via les attributs CSS ou de style en ligne.

Implémentation

Pour obtenir la hauteur de ligne réelle à l'aide de clientHeight, suivez ces étapes :

1. Clonez le DIV en question, en vous assurant que tous les styles pertinents sont hérités.
2. Définissez le HTML interne du DIV cloné sur un caractère unique, tel que « A ».
3. Ajoutez le DIV cloné au nœud parent du DIV d'origine.
4. Calculez la hauteur client du DIV cloné.
5. Supprimez le DIV cloné du document.

Extrait de code

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

Cette approche fournit une méthode simple mais efficace pour mesurer avec précision la hauteur de ligne réelle d'un DIV, quel que soit le toute propriété CSS remplace.

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!