Bagaimana untuk mendapatkan lebar dan ketinggian halaman dengan jquery

Dalam pembangunan bahagian hadapan, selalunya perlu mendapatkan lebar dan ketinggian halaman untuk susun atur atau melaraskannya secara dinamik mengikut saiz halaman. Dalam jQuery, mendapatkan lebar dan ketinggian halaman boleh dicapai melalui kaedah berikut.

1 Gunakan kaedah .width() dan .height() untuk mendapatkan lebar dan tinggi halaman

jQuery menyediakan satu siri kaedah pemerolehan saiz, termasuk .width() dan .height. () Kaedah untuk mendapatkan lebar dan tinggi sesuatu elemen. Untuk keseluruhan halaman dokumen, kita boleh mendapatkan saiz halaman dengan mendapatkan lebar dan ketinggian elemen badan. Kod sampel adalah seperti berikut:

var pageWidth = $('body').width();
var pageHeight = $('body').height();
console.log('页面宽度：' + pageWidth + '，页面高度：' + pageHeight);

Perlu diambil perhatian bahawa saiz halaman yang diperoleh mungkin bukan saiz akhir kerana halaman mungkin dalam keadaan pelarasan dinamik. Untuk mendapatkan saiz halaman akhir, anda boleh membungkus kod di atas dalam acara pemuatan tetingkap untuk memastikan halaman dimuatkan sepenuhnya sebelum mendapatkan saiz. Kod sampel adalah seperti berikut:

$(window).load(function(){
    var pageWidth = $('body').width();
    var pageHeight = $('body').height();
    console.log('页面宽度：' + pageWidth + '，页面高度：' + pageHeight);
});

2. Gunakan objek $(window) untuk mendapatkan lebar dan tinggi halaman

Kaedah lain ialah menggunakan objek $(window) untuk dapatkan lebar dan tinggi halaman. Objek $(window) mewakili objek tetingkap penyemak imbas, jadi saiz tetingkap semasa boleh diperoleh melalui objek ini, iaitu saiz halaman. Kod sampel adalah seperti berikut:

var pageWidth = $(window).width();
var pageHeight = $(window).height();
console.log('页面宽度：' + pageWidth + '，页面高度：' + pageHeight);

Perlu diingatkan juga bahawa saiz halaman yang diperoleh mungkin bukan saiz akhir, jadi kod di atas juga boleh dibungkus dalam acara pemuatan tetingkap untuk memastikan halaman itu dimuatkan sepenuhnya sebelum mendapatkan saiz. Kod sampel adalah seperti berikut:

$(window).load(function(){
    var pageWidth = $(window).width();
    var pageHeight = $(window).height();
    console.log('页面宽度：' + pageWidth + '，页面高度：' + pageHeight);
});

3. Gunakan document.documentElement.clientWidth dan document.documentElement.clientHeight untuk mendapatkan lebar dan tinggi halaman

Cara lain untuk mendapatkan lebar dan tinggi halaman ialah menggunakan document.documentElement. clientWidth dan document.documentElement.clientHeight. Kedua-dua sifat ini masing-masing mewakili lebar dan ketinggian tempat pandang dokumen, yang merupakan kawasan yang boleh dilihat pada halaman web semasa. Contoh kod adalah seperti berikut:

var pageWidth = document.documentElement.clientWidth;
var pageHeight = document.documentElement.clientHeight;
console.log('页面宽度：' + pageWidth + '，页面高度：' + pageHeight);

Perlu diingatkan juga bahawa saiz halaman yang diperoleh mungkin bukan saiz akhir, jadi kod di atas juga boleh dibungkus dalam acara pemuatan tetingkap untuk memastikan halaman itu dimuatkan sepenuhnya sebelum mendapatkan saiz. Kod sampel adalah seperti berikut:

$(window).load(function(){
    var pageWidth = document.documentElement.clientWidth;
    var pageHeight = document.documentElement.clientHeight;
    console.log('页面宽度：' + pageWidth + '，页面高度：' + pageHeight);
});

Ringkasan:

Kesan yang dicapai oleh tiga kaedah di atas adalah untuk mendapatkan lebar dan ketinggian halaman. Kaedah yang hendak digunakan bergantung pada keperluan khusus anda dan realiti projek. Walau bagaimanapun, satu perkara yang perlu diambil perhatian ialah saiz halaman yang diperolehi mungkin bukan saiz akhir, jadi sebaiknya balut kod dalam acara pemuatan tetingkap untuk memastikan halaman dimuatkan sepenuhnya sebelum mendapatkan saiz.

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan lebar dan ketinggian halaman dengan jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!