Bagaimana Mendapatkan Ketinggian Div Apabila Tiada Ketinggian CSS Eksplisit Ditetapkan?

Tentukan Ketinggian Div tanpa Peraturan CSS Eksplisit

Mendapatkan ketinggian div boleh mencabar jika tiada ketinggian yang ditetapkan secara eksplisit dalam CSS. Walaupun kaedah .height() jQuery biasanya digunakan untuk ini, ia memerlukan peraturan CSS sedia ada untuk kefungsian yang betul. Berikut ialah pendekatan alternatif:

Fungsi Ketinggian jQuery

jQuery menawarkan pelbagai fungsi ketinggian yang boleh memberikan ukuran ketinggian yang tepat, walaupun tanpa peraturan ketinggian CSS:

• .height(): Tidak termasuk pelapik, jidar dan jidar.
• .innerHeight(): Termasuk padding tetapi tidak termasuk jidar dan jidar.
• .outerHeight(): Termasuk jidar tetapi tidak termasuk jidar.
• .outerHeight(benar): Termasuk jidar.

Demo Penggunaan

Coretan kod di bawah menunjukkan cara menggunakan fungsi ini:

<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>

Output:

Ketinggian pengiraan div dipaparkan dalam div itu sendiri, memberikan maklumat terperinci tentang setiap output fungsi.

Atas ialah kandungan terperinci Bagaimana Mendapatkan Ketinggian Div Apabila Tiada Ketinggian CSS Eksplisit Ditetapkan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!