Artikel ini mendemonstrasikan elemen DOM 'clientTop' bersama dengan penerapan praktis dalam HTML.
Bagaimana Cara Menggunakan Elemen DOM 'clientTop' di HTML?
Properti 'clientTop' berguna untuk bekerja dengan tata letak dan pemosisian elemen HTML saat membuat halaman web. Yang pada gilirannya membantu dalam membuat tata letak situs web yang responsif dan dinamis
Contoh
Mari kita memiliki contoh untuk pemahaman yang lebih baik tentang properti 'clientTop'. Misalnya, bobot batas dari posisi teratas dievaluasi dalam contoh ini:
< tubuh >
< h3 pengenal = 'contoh' > Artikel disediakan oleh Linuxhint untuk Penjelasan yang lebih baik < / h3 >
< / tubuh >
Pertama, di dalam “
< gaya >
#contoh {
berbatasan : 2px hitam pekat;
padding: 10px;
latar belakang- warna : Abu-abu muda;
}
< / gaya >
Setelah itu, di dalam “
Setelah eksekusi kode yang disebutkan di atas, halaman web muncul seperti ini:
Output menampilkan bahwa elemen div dan h3 ditampilkan di halaman web dengan gaya dasar.
Gunakan Properti 'clientTop'.
Untuk menggunakan “ clientTop ” pada elemen HTML, tambahkan baris kode berikut di dalam “
adalah contoh = document.getElementById ( 'contoh' ) ;
var topHeight = contoh.clientTop;
console.log ( 'Tinggi Batas Atas:' + tinggi atas + 'px' ) ;
< / naskah >
Dalam cuplikan kode di atas:
- Pertama, variabel “ contoh ” dibuat yang menyimpan informasi atau menerapkan beberapa tindakan ke elemen HTML.
- Selanjutnya, “ topHeight variabel ” menyimpan “ contoh variabel ” bersama dengan “ clientTop ' Properti.
- Pada akhirnya, tampilkan “ topHeight ” variabel di konsol menggunakan “ konsol.log() ' metode.
Setelah eksekusi cuplikan kode di atas, konsol muncul seperti ini:
Output di atas mengilustrasikan bahwa tinggi/berat batas atas ditampilkan di konsol dalam piksel untuk elemen yang dipilih.
Kesimpulan
“ clientTop ” properti mengukur tinggi total elemen HTML, termasuk batas dan bantalannya. Properti 'clientTop' mengembalikan bobot batas dari posisi teratas untuk elemen HTML yang dipilih yang membantu membangun halaman web interaktif. Artikel ini telah menunjukkan apa yang dimaksud dengan elemen DOM 'clientTop' dalam HTML.