Bagaimana untuk Mendapatkan Ketinggian Diberikan Elemen Bersaiz Dinamik dalam jQuery?

Dapatkan Ketinggian Diberikan Elemen dalam jQuery

Apabila berurusan dengan elemen yang ketinggiannya dinamik dan tidak ditetapkan secara eksplisit, mendapatkan ketinggian yang diberikan boleh menjadi penting untuk pelbagai web pembangunan tugasan.

Masalah:

Bagaimana untuk menentukan ketinggian yang diberikan sesuatu elemen, terutamanya untuk elemen yang kandungan menentukan ketinggiannya secara dinamik?

Penyelesaian:

Menggunakan jQuery, anda boleh menggunakan kaedah berikut untuk mendapatkan semula ketinggian elemen yang diberikan:

• clientHeight: Mengembalikan ketinggian elemen, termasuk pelapik menegak.
• offsetHeight: Mengembalikan ketinggian elemen, termasuk pelapik menegak dan atas/bawah sempadan.
• scrollHeight: Mengembalikan ketinggian dokumen yang terkandung (jika berkenaan), termasuk pelapik menegak dan sempadan menegak.

Untuk melaksanakan ini dalam jQuery, anda boleh menggunakan yang berikut kod:

var h = $('#someDiv').clientHeight;   // Includes vertical padding
var h = $('#someDiv').offsetHeight;  // Includes vertical padding and borders
var h = $('#someDiv').scrollHeight;  // Includes document height, padding, and borders

Penjelasan:

• clientHeight: Sifat ini menyediakan ketinggian elemen dalam kawasan yang boleh dilihat, yang termasuk pelapik menegak tetapi tidak termasuk sempadan.
• offsetHeight: Sifat offsetHeight merangkumi ketinggian elemen, bersama-sama dengan pelapik menegak, sempadan atas dan bawah serta sebarang keruntuhan jidar.
• scrollHeight: Sifat scrollHeight menggabungkan semua ukuran di atas juga sebagai ketinggian dokumen yang terkandung. Ini amat berguna untuk elemen dengan kandungan boleh ditatal.

Dengan menggunakan kaedah ini, anda boleh menangkap ketinggian unsur yang diberikan dengan tepat, walaupun apabila ketinggiannya ditentukan oleh kandungannya.

Atas ialah kandungan terperinci Bagaimana untuk Mendapatkan Ketinggian Diberikan Elemen Bersaiz Dinamik dalam jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!