Ermitteln der wahren Zeilenhöhe von DIVs in JavaScript
In JavaScript ist es oft wünschenswert, die tatsächliche Zeilenhöhe eines DIV zu bestimmen , anstatt sich auf CSS-Eigenschaften zu verlassen. Dies ist besonders nützlich, wenn die Zeilenhöhe nicht explizit in CSS definiert ist.
Die Herausforderung
Traditionelle Methoden zur Überprüfung des style.lineHeight-Attributs stellen die CSS-Definition bereit Zeilenhöhe, aber dieser Wert spiegelt möglicherweise nicht genau die tatsächlich auf der Seite gerenderte Zeilenhöhe wider.
Die Lösung: Verwenden ClientHeight
Die Lösung liegt in der Nutzung der clientHeight-Eigenschaft. Diese Eigenschaft, die die Höhe eines Elements einschließlich seines Abstands und Rands misst, kann auch verwendet werden, um die Zeilenhöhe eines DIV unter den folgenden Bedingungen zu bestimmen:
Implementierung
Um die tatsächliche Zeilenhöhe mit clientHeight zu erhalten, führen Sie die folgenden Schritte aus:
Code Snippet
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; }
Dieser Ansatz bietet eine einfache, aber effektive Methode zum genauen Messen der tatsächlichen Zeilenhöhe eines DIV, unabhängig von Überschreibungen von CSS-Eigenschaften.
Das obige ist der detaillierte Inhalt vonWie finde ich die wahre Zeilenhöhe eines DIV in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!