Bagaimanakah saya boleh menentukan ketinggian div tanpa ketinggian CSS yang ditentukan?

Menentukan Ketinggian Div tanpa Ketinggian CSS Ditentukan

Mendapatkan ketinggian elemen boleh mencabar apabila tiada peraturan ketinggian ditetapkan dalam CSS. Di sinilah memahami kaedah jQuery yang berbeza untuk mendapatkan ketinggian menjadi penting.

Bertentangan dengan tanggapan yang salah, kaedah .height() jQuery tidak bergantung pada peraturan ketinggian CSS yang ditentukan. Ia menentukan ketinggian yang dikira, yang merangkumi kandungan elemen, padding dan sempadan. Ini menjadikannya alat yang berkesan untuk mendapatkan semula ketinggian sebenar sesuatu elemen, tidak kira sama ada CSS menyatakannya secara eksplisit.

Kaedah Pengukuran Ketinggian

jQuery menyediakan tiga kaedah utama untuk mengukur ketinggian elemen:

• .height(): Mengembalikan ketinggian elemen tidak termasuk pelapik, jidar dan jidar.
• .innerHeight(): Mengembalikan ketinggian elemen termasuk pelapik tetapi tidak termasuk jidar dan jidar.
• .outerHeight(): Mengembalikan ketinggian elemen termasuk jidar tetapi tidak termasuk jidar. Untuk ukuran yang lebih inklusif, gunakan .outerHeight(true) untuk memasukkan margin juga.

Demonstrasi

Coretan kod yang disediakan menunjukkan penggunaan kaedah ini:

$(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>')
});

Dengan memahami kaedah jQuery ini, anda boleh memperoleh ketinggian elemen dengan berkesan, walaupun tiada peraturan ketinggian CSS yang ditentukan.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menentukan ketinggian div tanpa ketinggian CSS yang ditentukan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!