Bagaimana untuk Mendapatkan Ketinggian Div Tanpa Peraturan Ketinggian CSS Ditakrifkan?

Cara Mendapatkan Ketinggian Div dengan Peraturan Ketinggian CSS Tidak Ditakrifkan

Menentukan ketinggian elemen tanpa peraturan ketinggian CSS yang jelas boleh mencabar. Walau bagaimanapun, adalah mungkin menggunakan kaedah yang disediakan oleh perpustakaan JavaScript jQuery.

Kaedah jQuery .height

Bertentangan dengan andaian asal, kaedah jQuery .height() tidak tidak memerlukan peraturan ketinggian CSS yang dipratentukan. Ia mendapatkan semula ketinggian unsur yang dikira, dengan mengambil kira gaya semasanya. Kaedah ini tidak termasuk pelapik, jidar dan jidar secara lalai.

Pilihan Lain

Selain .height(), anda juga boleh menggunakan kaedah berikut:

• .innerHeight(): Mengembalikan ketinggian termasuk padding tetapi tidak termasuk jidar dan jidar.
• .outerHeight(): Mengembalikan ketinggian termasuk jidar tetapi tidak termasuk jidar.
• .outerHeight(true): Mengembalikan ketinggian termasuk jidar.

Contoh

Pertimbangkan kod HTML dan jQuery berikut:

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

Output:

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

Kesimpulan

Kaedah jQuery menyediakan kemudahan cara untuk mendapatkan ketinggian elemen, tidak kira sama ada peraturan ketinggian CSS ditakrifkan. Ciri ini berharga untuk komponen web dinamik dan pelarasan reka letak.

Atas ialah kandungan terperinci Bagaimana untuk Mendapatkan Ketinggian Div Tanpa Peraturan Ketinggian CSS Ditakrifkan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!