Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie erhalte ich die Höhe eines Div, wenn keine explizite CSS-Höhe festgelegt ist?

Patricia Arquette
Freigeben: 2024-10-27 06:26:03
Original
834 Leute haben es durchsucht

How to Get the Height of a Div When No Explicit CSS Height is Set?

Div-Höhe ohne explizite CSS-Regel bestimmen

Das Ermitteln der Höhe eines Div kann schwierig sein, wenn im CSS keine explizit festgelegte Höhe vorhanden ist. Normalerweise wird hierfür die jQuery-Methode .height() verwendet, für die ordnungsgemäße Funktionalität ist jedoch eine vorhandene CSS-Regel erforderlich. Hier ist ein alternativer Ansatz:

jQuery-Höhenfunktionen

jQuery bietet eine Reihe von Höhenfunktionen, die auch ohne CSS-Höhenregeln genaue Höhenmessungen liefern können:

  • .height(): Schließt Abstand, Rand und Rand aus.
  • .innerHeight(): Schließt Abstand, aber keinen Rand und Rand ein.
  • .outerHeight(): Beinhaltet Rand, aber schließt Rand aus.
  • .outerHeight(true): Beinhaltet Rand.

Verwendungsdemo

Der folgende Codeausschnitt zeigt, wie diese Funktionen verwendet werden:

<code class="js">$(function() {
  var $heightTest = $('#heightTest');
  $heightTest.html('Div style set as "height: 180px; padding: 10px; margin: 10px; border: 2px solid blue;"')
    .append('<p>Height (.height() returns) : ' + $heightTest.height() + ' [Just Height]</p>')
    .append('<p>Inner Height (.innerHeight() returns): ' + $heightTest.innerHeight() + ' [Height + Padding (without border)]</p>')
    .append('<p>Outer Height (.outerHeight() returns): ' + $heightTest.outerHeight() + ' [Height + Padding + Border]</p>')
    .append('<p>Outer Height (.outerHeight(true) returns): ' + $heightTest.outerHeight(true) + ' [Height + Padding + Border + Margin]</p>')
});</code>
Nach dem Login kopieren

Ausgabe:

Die berechnete Höhe des Div wird im Div selbst angezeigt und bietet detaillierte Informationen über die Ausgabe jeder Funktion.

Das obige ist der detaillierte Inhalt vonWie erhalte ich die Höhe eines Div, wenn keine explizite CSS-Höhe festgelegt ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!