Bagaimana untuk Menentukan Ketinggian Elemen dalam jQuery Tanpa Peraturan Ketinggian CSS Eksplisit?

Menentukan Ketinggian Elemen Tanpa Peraturan Ketinggian CSS

Jika tiada peraturan ketinggian CSS untuk elemen, ia mungkin sukar untuk diperolehi ketinggiannya. Kaedah jQuery .height(), yang memerlukan nilai ketinggian CSS yang telah ditetapkan, nampaknya tidak mencukupi dalam senario ini. Walau bagaimanapun, terdapat kaedah alternatif untuk menentukan ketinggian elemen.

jQuery .height()

Bertentangan dengan kepercayaan popular, jQuery .height() tidak bergantung pada definisi ketinggian CSS. Ia mengira ketinggian pengiraan elemen, menjadikannya sesuai untuk senario yang tiada ketinggian CSS eksplisit ditentukan.

DEMO

.height(): Mendapatkan semula ketinggian elemen. tanpa pelapik, jidar atau jidar.

.innerHeight(): Mendapatkan semula ketinggian elemen termasuk padding tetapi tidak termasuk jidar dan jidar.

.outerHeight(): Mendapatkan semula ketinggian elemen termasuk jidar tetapi tidak termasuk margin.

.outerHeight(true): Mendapatkan semula ketinggian elemen termasuk kedua-dua jidar dan jidar.

Snippet Kod untuk Demo Langsung

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

Atas ialah kandungan terperinci Bagaimana untuk Menentukan Ketinggian Elemen dalam jQuery Tanpa Peraturan Ketinggian CSS Eksplisit?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!