Bagaimana untuk Mendapatkan Ketinggian Div Tanpa jQuery?

Mendapatkan Ketinggian Div Tanpa Perlu jQuery

Pembangun sering mencari kaedah untuk mendapatkan ketinggian elemen div tanpa bergantung pada perpustakaan seperti jQuery . Walaupun kaedah .height() jQuery biasanya disebut, terdapat penyelesaian JavaScript biasa yang boleh menyelesaikan tugas yang sama dengan berkesan.

Alternatif kepada .height() jQuery

Untuk menentukan ketinggian div semata-mata melalui JavaScript, pembangun boleh menggunakan sifat clientHeight atau offsetHeight bagi objek HTMLElement yang mewakili div. Begini cara setiap sifat berfungsi:

• clientHeight: Sifat ini mengukur ketinggian kandungan yang boleh dilihat div, termasuk pelapik tetapi tidak termasuk sempadan dan bar skrol.
• offsetHeight: Sifat ini mengembalikan jumlah ketinggian daripada div, termasuk pelapik, bar skrol dan sempadan.

Pelaksanaan

Untuk mendapatkan semula ketinggian div menggunakan clientHeight, gunakan sintaks berikut:

<code class="javascript">var clientHeight = document.getElementById('myDiv').clientHeight;</code>

Sebagai alternatif, untuk memasukkan bar skrol dan sempadan dalam ukuran, anda boleh menggunakan offsetHeight:

<code class="javascript">var offsetHeight = document.getElementById('myDiv').offsetHeight;</code>

Contoh

Berikut ialah contoh untuk tunjukkan penggunaan kedua-dua sifat:

<code class="html"><div id="myDiv" style="height: 100px; padding: 20px; border: 10px solid black;">
    Content
</div></code>

<code class="javascript">var clientHeight = document.getElementById('myDiv').clientHeight; // Returns 80
var offsetHeight = document.getElementById('myDiv').offsetHeight; // Returns 130</code>

Dalam contoh ini, clientHeight mengembalikan 80px kerana ia mengecualikan padding dan jidar, manakala offsetHeight mengembalikan 130px, termasuk semua elemen yang menyumbang kepada ketinggian div.

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