Blog ini menunjukkan penggunaan elemen DOM clientHeight dalam HTML.
Bagaimana untuk Menggunakan Elemen DOM 'clientHeight' dalam HTML?
' clientHeight ” harta membenarkan pembangun mengira ketinggian kandungan kelihatan unsur. Ia membantu dalam meletakkan elemen secara relatif antara satu sama lain atau menentukan sama ada pengguna telah menatal ke tepi kanan bekas boleh ditatal. Ia juga menyediakan maklumat tentang baki ruang yang tidak digunakan pada halaman web.
Contoh
Mari kita lihat contoh untuk demonstrasi yang lebih baik tentang sifat 'clientHeight'. Sebagai contoh, ' onclick ' pendengar acara digunakan untuk memaparkan hasil yang disediakan oleh ' clientHeight ” harta:
< badan >
< h2 ID = 'elemen' >< / h2 >
< h2 ID = 'elemen' onclick = 'showelementHeight()' >
Klik Artikel Linuxhint untuk menunjukkan Ketinggian!
< / h2 >
< skrip >
fungsi showelementHeight() {
contoh var = document.getElementById('elemen');
var elementHeight= example.clientHeight;
alert('Ketinggian ialah: ' + elementHeight + ' pixels.');
}
< / skrip > >
< / badan >
Penjelasan coretan kod di atas diterangkan di bawah:
- Pada mulanya, buat ' 'tag di dalam'
” teg dan berikan beberapa data palsu kepadanya. Juga, tetapkan id ' unsur ” kepada elemen HTML yang dipilih. - Seterusnya, tambahkan “ onclick() ” pendengar acara yang memanggil “ showelementHeight() fungsi ” apabila pengguna mengklik pada “ ” unsur.
- Kemudian, di dalam ' showelementHeight() fungsi ” mencipta pembolehubah bernama “ contoh ” yang bertindak sebagai contoh untuk elemen HTML yang mempunyai id “ unsur ”.
- Seterusnya, buat pembolehubah lain bernama ' elementHeight ’’ yang menyimpan hasil yang disediakan oleh sifat “clientHeight”.
- Selepas itu, paparkan ' elementHeight '' pembolehubah pada kotak amaran menggunakan ' amaran() ” kaedah.
Pada akhirnya, tambahkan sifat CSS berikut untuk menggayakan ' h2 'elemen:
< gaya >
#elemen {
jidar: 20px;
padding: 10px;
latar belakang- warna : darkcyan;
ketinggian : 300px;
teks- selaraskan : pusat;
baris- ketinggian : 100px;
}
< / gaya >
Dalam coretan kod di atas, sifat CSS berikut diberikan kepada div yang mempunyai id ' unsur ”:
- ' 20px ”, “ 10px ” dan “ darkcyan nilai ' diberikan kepada CSS ' margin ”, “ padding ” dan “ warna latar belakang ” hartanah, masing-masing.
- Juga menggunakan ' ketinggian ”, “ penjajaran teks ” dan “ ketinggian garis ” Sifat CSS untuk meningkatkan keterlihatan pengguna.
Selepas pelaksanaan coretan kod di atas, halaman web kelihatan seperti ini:
Output memaparkan bahawa ketinggian elemen yang dipilih dipaparkan dalam kotak amaran, apabila pengguna mengklik pada elemen tersebut.
Kesimpulan
Untuk menggunakan ' clientHeight ” dalam HTML, pilih elemen HTML dengan mengakses atribut id. Selepas itu, lampirkan sifat 'clientHeight' dan paparkan hasilnya. Ia adalah harta baca sahaja dan mengembalikan hasilnya dalam piksel. Sifat 'clientHeight' berfungsi dalam teg '