Wie finde ich die tatsächliche Zeilenhöhe eines DIV in JavaScript, wenn keine CSS-Regel vorhanden ist?

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

In JavaScript ist das Ermitteln der Zeilenhöhe eines Elements ganz einfach über die style.lineHeight-Eigenschaft. Dieser Ansatz basiert jedoch auf der Existenz einer CSS-Stilregel, die die Zeilenhöhe angibt. Wenn eine solche Regel fehlt, stellt die Bestimmung der tatsächlichen gerenderten Zeilenhöhe eines Elements eine andere Herausforderung dar.

Die Lösung: Verwendung von ClientHeight

Die tatsächliche Zeilenhöhe kann mithilfe der Eigenschaft „clientHeight“ genau bestimmt werden, da sie die berechnete Höhe eines Elements darstellt, einschließlich der Polsterung, jedoch nicht des Rands. Die folgende JavaScript-Funktion demonstriert diese Technik:

function getLineHeight(el) {
  // Create a temporary element to clone the target element's properties
  const temp = document.createElement(el.nodeName);

  // Override default styles to ensure consistent font properties
  temp.setAttribute("style", "margin:0; padding:0; font-family:" +
    (el.style.fontFamily || "inherit") + "; font-size:" +
    (el.style.fontSize || "inherit"));

  // Set the temporary element's content to "A"
  temp.innerHTML = "A";

  // Append the temporary element to the DOM
  el.parentNode.appendChild(temp);

  // Get the computed height of the temporary element
  const ret = temp.clientHeight;

  // Remove the temporary element
  temp.parentNode.removeChild(temp);

  // Return the computed height, which represents the actual line-height
  return ret;
}

Diese Funktion klont effektiv die Eigenschaften des Zielelements in ein temporäres Element, das dann zur Berechnung der Zeilenhöhe verwendet wird. Indem wir die Schrifteigenschaften im temporären Element auf „erben“ setzen, stellen wir sicher, dass es die gleiche Schriftfamilie und -größe wie das Zielelement übernimmt. Dieser Ansatz bietet eine zuverlässige und konsistente Methode zur Bestimmung der tatsächlich gerenderten Zeilenhöhe, unabhängig vom Vorhandensein einer CSS-Stilregel.

Das obige ist der detaillierte Inhalt vonWie finde ich die tatsächliche Zeilenhöhe eines DIV in JavaScript, wenn keine CSS-Regel vorhanden ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!