Tinggi dan lebar adalah dimensi yang paling penting saat mendesain tata letak halaman web.
'Tinggi' menunjukkan ukuran panjang suatu benda dari atas ke bawah, sedangkan 'lebar' menunjukkan seberapa lebar suatu benda dari satu sisi ke sisi lainnya. Faktor-faktor ini membantu dalam menyesuaikan alokasi objek di jendela. Dalam JavaScript, “ tinggi ' Dan ' lebar ” properti selanjutnya diklasifikasikan ke dalam dua kategori 'inner' yaitu, 'innerHeight/innerWidth', dan 'outer' yaitu, 'outerHeight/outerWidth', masing-masing.
Artikel ini menguraikan tujuan dan cara kerja properti Window “innerHeight” di JavaScript.
Apa yang Dilakukan Properti Window “innerHeight” di JavaScript?
“ innerHeight ” properti dikaitkan dengan objek 'jendela' yang mengambil tinggi viewport dari jendela browser tidak termasuk bilah lokasi, bilah alat, bilah menu, dan lainnya. Juga, itu termasuk ketinggian scrollbar horizontal jika disertakan. Nilai yang dikembalikan dari properti ini diambil dari jendela “layout viewport” yaitu area yang menampilkan konten halaman web.
Sintaks Dasar
jendela.innerHeight ATAU innerHeight
Menurut sintaks di atas, ' innerHeight Properti ” dapat dengan mudah diterapkan secara langsung atau menggunakan objek “jendela”.
Mari terapkan properti yang ditentukan di atas secara praktis dengan bantuan sintaks dasarnya.
Contoh 1: Menerapkan Properti Jendela “innerHeight” untuk Mengembalikan Tinggi Area Pandang dari Jendela Peramban
Contoh ini menggunakan properti “innerHeight” dengan objek “window” untuk mengambil tinggi viewport dari jendela browser.
Kode HTML
Pertama, lihat kode di bawah ini:
< h2 > Properti jendela innerHeight h2 >< tombol onclick = 'jsFunc()' > Dapatkan Tinggi tombol >
< P pengenal = 'untuk' > P >
Pada baris kode di atas:
- “ ” tag mendefinisikan subjudul level 2.
- “
” tag mewakili tombol yang memiliki peristiwa 'onclick' untuk menjalankan fungsi 'jsFunc()' saat peristiwa dipicu. - “ ” menambahkan paragraf kosong dengan id 'para' yang ditetapkan untuk menampilkan nilai yang dikembalikan dari properti 'innerHeight' yang diterapkan.
Kode JavaScript
Sekarang, lanjutkan dengan kode yang diberikan di bawah ini:
< naskah >fungsi jsFunc ( ) {
membiarkan h = jendela.innerHeight;
document.getElementById ( 'untuk' ) .innerHTML = 'InnerHeight Jendela:' + h;
}
naskah >
Pada baris kode di atas:
- Pertama, tentukan fungsi bernama ' jsFunc() ”.
- Dalam definisinya, variabel “h” menerapkan “ innerHeight ” properti menggunakan objek 'jendela'.
- Setelah itu, terapkan ' getElementById() ” metode untuk mendapatkan paragraf kosong yang ditambahkan menggunakan id 'para' dan menampilkan ketinggian bagian dalam jendela browser saat ini di dalamnya.
Keluaran
Seperti yang ditunjukkan pada output di atas, jendela browser saat ini menampilkan tinggi viewport (tinggi bagian dalam) yaitu, “ 599px ” saat tombol diklik.
Contoh 2: Menerapkan Jendela Gabungan Properti 'innerHeight' dan 'innerWidth'.
Properti 'innerHeight' dapat diimplementasikan bersama properti dimensi lain seperti 'innerWidth', 'outerWidth', 'outerHeight', dll. Dalam skenario ini, digunakan bersama ' innerWidth ' Properti.
Kode HTML
Mari kita ikhtisar kode HTML yang dimodifikasi:
< h2 > Properti jendela innerHeight dan innerWidth h2 >< tombol onclick = 'jsFunc()' > Dapatkan Tinggi dan Lebar tombol >
< P pengenal = 'untuk' > P >
Di sini, konten elemen “