Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie erhalte ich die Höhe eines Div ohne eine definierte CSS-Höhenregel?

Linda Hamilton
Freigeben: 2024-11-01 02:41:28
Original
446 Leute haben es durchsucht

How to Get the Height of a Div Without a Defined CSS Height Rule?

So ermitteln Sie die Höhe eines Divs mit einer undefinierten CSS-Höhenregel

Das Bestimmen der Höhe eines Elements ohne eine explizite CSS-Höhenregel kann sein herausfordernd. Es ist jedoch möglich, Methoden zu verwenden, die von der jQuery-JavaScript-Bibliothek bereitgestellt werden.

jQuery .height-Methode

Entgegen der ursprünglichen Annahme ist dies bei der jQuery .height()-Methode der Fall erfordern keine vordefinierte CSS-Höhenregel. Es ruft die berechnete Höhe des Elements unter Berücksichtigung seines aktuellen Stils ab. Diese Methode schließt standardmäßig Abstand, Rand und Rand aus.

Andere Optionen

Zusätzlich zu .height() können Sie auch die folgenden Methoden verwenden:

  • .innerHeight(): Gibt die Höhe einschließlich Polsterung, aber ohne Rand und Rand zurück.
  • .outerHeight(): Gibt die Höhe einschließlich Rand zurück, aber ohne Rand.
  • .outerHeight(true): Gibt die Höhe einschließlich Rand zurück.

Beispiel

Bedenken Sie die Folgender HTML- und jQuery-Code:

<code class="html"><div id="heightTest"></div>

<script>
  $(function() {
    var $heightTest = $('#heightTest');
    $heightTest.html('This is the test div.');

    console.log('Height (.height() returns): ', $heightTest.height());
    console.log('Inner Height (.innerHeight() returns): ', $heightTest.innerHeight());
    console.log('Outer Height (.outerHeight() returns): ', $heightTest.outerHeight());
    console.log('Outer Height (.outerHeight(true) returns): ', $heightTest.outerHeight(true));
  });
</script></code>
Nach dem Login kopieren

Ausgabe:

Height (.height() returns): 18px
Inner Height (.innerHeight() returns): 56px
Outer Height (.outerHeight() returns): 58px
Outer Height (.outerHeight(true) returns): 88px
Nach dem Login kopieren

Schlussfolgerung

jQuery-Methoden bieten eine praktische Möglichkeit Möglichkeit, die Höhe eines Elements abzurufen, unabhängig davon, ob eine CSS-Höhenregel definiert ist. Diese Funktion ist für dynamische Webkomponenten und Layoutanpassungen wertvoll.

Das obige ist der detaillierte Inhalt vonWie erhalte ich die Höhe eines Div ohne eine definierte CSS-Höhenregel?. 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