Holen Sie sich die Höhe in jQuery

In diesem Beitrag werden wir über die jQuery-Methoden sprechen, um die Höhe des angegebenen Elements zu erhalten.

Holen Sie sich die Höhe in jQuery

jQuery bietet drei verschiedene Methoden, um die Höhe eines jQuery-Elements zu ermitteln, .height(), .innerHeight() oder .outerHeight(). Je nach Anforderung können Sie eine dieser Methoden auswählen, um die Höhe eines jQuery-Elements abzurufen.

jQuery hilft dabei, die aktuell berechnete Höhe für das erste Element in der Gruppe übereinstimmender Elemente mit diesen Methoden zu ermitteln. Lassen Sie uns zunächst den Unterschied zwischen diesen Methoden verstehen.

1. .height() – Eingebaute jQuery-Methode, die die Höhe des Elements ohne Rand, Polsterung und Rand zurückgibt. Diese Methode akzeptiert keine Eingabeargumente.
2. .innerHeight() – Eingebaute jQuery-Methode, die die Höhe des Elements zurückgibt, einschließlich der Füllung, aber ohne Rand und Rahmen. Diese Methode akzeptiert keine Eingabeargumente.
3. .outerHeight() – Eingebaute jQuery-Methode, die die Höhe des div-Elements zurückgibt, einschließlich Rahmen, aber ohne Rand. Diese Methode akzeptiert einen booleschen Wert als Eingabeargument, der angibt, ob ein Rand eingefügt werden soll oder nicht.
4. .outerHeight(true) - Eingebaute jQuery-Methode, die die Höhe des div inklusive Rand zurückgibt.

Syntax:

.height().innerHeight().outerHeight(val boolean)

Der einzige Unterschied zwischen .height() und .css("height") besteht darin, dass ersterer einen Pixelwert ohne Einheiten zurückgibt (z. B. 250), während letzterer einen Wert mit intakten Einheiten zurückgibt (z. B. 250px). Die Methode .height() wird empfohlen, wenn Sie die Höhe eines Elements in einer mathematischen Berechnung verwenden.

Die .height() gibt immer die Höhe des Inhalts zurück, unabhängig vom Wert der CSS-Eigenschaft box size. Dazu kann es erforderlich sein, die CSS-Eigenschaft height plus box-sizing zu erhalten und dann alle potenziellen Rahmen und Padding für jedes Element zu subtrahieren, wenn das Element box-sizing ist: border-box.

Verwenden Sie .css( "height") statt .height(), um dies zu vermeiden.

Lassen Sie es uns anhand eines einfachen Beispiels unten verstehen.

<button id="para">Get Height</button>
<p>
  Hello Users
</p>

p {
  border: 1px black solid;
  margin: 3px;
  padding: 5px;
}

$('#para').on('click', () => {
  console.log('height', $('p').height());
  console.log('Inner height', $('p').innerHeight());
  console.log('Outer height', $('p').outerHeight());
});

Im obigen Beispiel haben wir das Absatz-Tag mit 1px-Rand, 3px-Rand und 5px-Padding definiert. Sobald der Benutzer auf die Schaltfläche klickt, um die Höhe des Absatz-Tags zu erhalten, erhält er die .height() des p-Tags, ohne Rand, Polsterung und Rand.

Die Methode .innerHeight() erhält die Höhe des Absatz-Tags mit Auffüllung, und die Methode .outerHeight() erhält die Höhe des Absatz-Tags mit Rand und Rand.

Versuchen Sie, das obige Code-Snippet in einem beliebigen Browser auszuführen, der jQuery unterstützt, wodurch das Ergebnis unten angezeigt wird.

"height", 18.4
"Inner height", 28.4
"Outer height", 30.4

Demo