Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie kann ich die Höhe eines Div ohne definierte CSS-Höhe bestimmen?

DDD
Freigeben: 2024-10-26 12:23:02
Original
873 Leute haben es durchsucht

How can I determine the height of a div without a defined CSS height?

Bestimmen der Höhe eines Div ohne definierte CSS-Höhe

Das Ermitteln der Höhe eines Elements kann schwierig sein, wenn im keine Höhenregel festgelegt ist CSS. Hier ist es entscheidend, die verschiedenen jQuery-Methoden zum Ermitteln der Höhe zu verstehen.

Entgegen der falschen Vorstellung basiert die .height()-Methode von jQuery nicht auf einer definierten CSS-Höhenregel. Es bestimmt die berechnete Höhe, die den Inhalt, den Abstand und die Ränder des Elements umfasst. Dies macht es zu einem effektiven Werkzeug zum Abrufen der tatsächlichen Höhe eines Elements, unabhängig davon, ob CSS diese explizit angibt.

Höhenmessmethoden

jQuery bietet drei Hauptmethoden für Elementhöhe messen:

  • .height(): Gibt die Höhe des Elements ohne Polsterung, Rahmen und Rand zurück.
  • .innerHeight(): Gibt die Höhe des Elements einschließlich Abstand, aber ohne Rand und Rand zurück.
  • .outerHeight(): Gibt die Höhe des Elements einschließlich Rand, aber ohne Rand zurück. Für eine umfassendere Messung verwenden Sie .outerHeight(true), um auch den Rand einzubeziehen.

Demonstration

Das bereitgestellte Code-Snippet demonstriert die Verwendung dieser Methoden:

$(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>')
});
Nach dem Login kopieren

Durch das Verständnis dieser jQuery-Methoden können Sie effektiv die Höhe eines Elements ermitteln, auch wenn keine CSS-Höhenregel definiert ist.

Das obige ist der detaillierte Inhalt vonWie kann ich die Höhe eines Div ohne definierte CSS-Höhe bestimmen?. 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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage