Wie ermittelt man die tatsächliche Zeilenhöhe eines DIV in JavaScript?

Bestimmen der tatsächlichen Zeilenhöhe eines DIV in JavaScript

Viele JavaScript-Entwickler suchen häufig nach Methoden, um die tatsächliche Zeilenhöhe eines DIV-Elements zu bestimmen, ohne den Einfluss von CSS-Eigenschaft. Während style.lineHeight einige Informationen bereitstellt, hängt es von der Existenz einer CSS-Regel ab.

Problemstellung

Gegeben sei ein DIV-Element ohne CSS-definierte Zeilenhöhe Die Herausforderung besteht darin, eine JavaScript-Lösung zu finden, die die tatsächliche Zeilenhöhe unabhängig von den Schriftarteigenschaften genau misst. Dies stellt konsistente Ergebnisse für Elemente mit unterschiedlicher Inhaltslänge und Zeilenumbrüchen sicher.

Lösung

Der zuverlässigste und effektivste Ansatz besteht in der Nutzung der clientHeight-Eigenschaft. Indem wir ein temporäres Element mit identischen Schriftart- und Größeneigenschaften wie das Zielelement erstellen, können wir dessen clientHeight extrahieren. Dieser Wert stellt die tatsächliche Zeilenhöhe dar, einschließlich aller vertikalen Ränder oder Leerräume innerhalb des DIV.

Hier ist eine Beispielimplementierung:

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

Durch „Klonen“ der Eigenschaften des Zielelements wird dies erreicht Die Funktion generiert ein temporäres Element und misst dessen clientHeight. Diese Technik bietet eine genaue Darstellung der tatsächlichen Zeilenhöhe, selbst in Szenarien mit komplexem Inhalt oder fehlenden CSS-Regeln.

Das obige ist der detaillierte Inhalt vonWie ermittelt man die tatsächliche Zeilenhöhe eines DIV in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!