Blog ini mendemonstrasikan penggunaan elemen DOM clientHeight dalam HTML.
Bagaimana Cara Menggunakan Elemen DOM 'clientHeight' di HTML?
“ clientHeight ” properti memungkinkan pengembang untuk menghitung ketinggian konten yang terlihat dari suatu elemen. Ini membantu dalam memposisikan elemen relatif satu sama lain atau menentukan apakah pengguna telah menggulir ke tepi kanan wadah yang dapat digulir. Ini juga memberikan informasi tentang sisa ruang yang tidak terpakai di halaman web.
Contoh
Mari kita telusuri contoh untuk demonstrasi properti 'clientHeight' yang lebih baik. Misalnya, “ onclick ” event listener digunakan untuk menampilkan hasil yang diberikan oleh “ clientHeight ' Properti:
< tubuh >
< h2 pengenal = 'elemen' >< / h2 >
< h2 pengenal = 'elemen' onclick = 'showelementHeight()' >
Klik Artikel Linuxint untuk menampilkan Tinggi!
< / h2 >
< naskah >
fungsi showelementHeight() {
var contoh = document.getElementById('element');
var elementHeight= contoh.clientHeight;
alert('Tingginya adalah: ' + elementHeight + ' pixels.');
}
< / naskah > >
< / tubuh >
Penjelasan potongan kode di atas dijelaskan di bawah ini:
- Awalnya, buat ' ' tag di dalam '
” beri tag dan berikan beberapa data dummy padanya. Juga, tetapkan id ' elemen ” ke elemen HTML yang dipilih. - Selanjutnya, tambahkan “ klik() ” pendengar acara yang memanggil “ showelementHeight() ” berfungsi ketika pengguna mengklik tombol “ ” elemen.
- Kemudian, di dalam ' showelementHeight() ” fungsi membuat variabel bernama “ contoh ” yang bertindak sebagai turunan dari elemen HTML yang memiliki id “ elemen ”.
- Selanjutnya, buat variabel lain bernama “ elementHeight ’ yang menyimpan hasil yang disediakan oleh properti “clientHeight”.
- Setelah itu tampilkan “ elementHeight ’ pada kotak peringatan menggunakan “ peringatan() ' metode.
Pada akhirnya, tambahkan properti CSS berikut untuk menata “ h2 ” elemen:
< gaya >
#elemen {
margin: 20px;
padding: 10px;
latar belakang- warna : darkcyan;
tinggi : 300px;
teks- meluruskan : tengah;
garis- tinggi : 100px;
}
< / gaya >
Dalam cuplikan kode di atas, properti CSS berikut ditugaskan ke div yang memiliki id “ elemen ”:
- “ 20px ”, “ 10px ' Dan ' darkcyan ” nilai diberikan ke CSS “ batas ”, “ lapisan ' Dan ' warna latar belakang ” properti, masing-masing.
- Juga menggunakan “ tinggi ”, “ perataan teks ' Dan ' tinggi garis ” properti CSS untuk meningkatkan visibilitas pengguna.
Setelah eksekusi potongan kode di atas, halaman web muncul seperti ini:
Output menampilkan bahwa ketinggian elemen yang dipilih ditampilkan di kotak peringatan, setiap kali pengguna mengklik elemen tersebut.
Kesimpulan
Untuk memanfaatkan “ clientHeight ” di HTML, pilih elemen HTML dengan mengakses atribut id. Setelah itu, pasang properti “clientHeight” dan tampilkan hasilnya. Ini adalah properti hanya-baca dan mengembalikan hasilnya dalam piksel. Properti “clientHeight” berfungsi di dalam tag “