Maison > Article > interface Web > 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 :
Implémentation
Pour obtenir la hauteur de ligne réelle à l'aide de clientHeight, suivez ces étapes :
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!