Bagaimana untuk menetapkan saiz tetingkap dalam javascript

JavaScript ialah bahasa skrip yang pada asalnya direka untuk dijalankan dalam pelayar web. Ia pada asalnya dibangunkan sebagai bahasa pengaturcaraan interaktif yang kecil, boleh skrip. JavaScript boleh menambah ciri interaktif pada halaman web dan memberikan kesan yang lebih dinamik pada halaman web. Dalam artikel ini, kami akan menetapkan saiz tetingkap melalui JavaScript dan memperkenalkan beberapa kaedah biasa dan praktikal untuk menetapkan saiz tetingkap.

Gunakan window.innerWidth dan window.innerHeight

window.innerWidth dan window.innerHeight ialah sifat saiz tetingkap yang paling asas, ia boleh digunakan untuk mendapatkan lebar dan ketinggian tetingkap penyemak imbas. Kedua-dua sifat ini mentakrifkan kawasan yang boleh dilihat, iaitu saiz tetingkap yang sebenarnya boleh dilihat pada skrin, tidak termasuk bar alat, bar skrol, sempadan, dsb.

console.log(window.innerWidth); //返回窗口的宽度
console.log(window.innerHeight); //返回窗口的高度

Gunakan kaedah window.resizeTo()

Kaedah window.resizeTo() boleh menetapkan saiz tetingkap semasa kepada lebar dan ketinggian yang ditentukan.

window.resizeTo(500,500);

Ini akan menetapkan saiz tetingkap kepada 500 piksel lebar dan 500 piksel tinggi.

Gunakan kaedah window.resizeBy()

Kaedah window.resizeBy() akan mengubah saiz tetingkap semasa. Ia memerlukan dua parameter: nilai mendatar dan nilai menegak. Parameter boleh menjadi nombor positif atau negatif.

window.resizeBy(100,50); //增加宽度100像素和高度50像素

Ini akan meningkatkan saiz tetingkap sebanyak 100 piksel lebar dan 50 piksel tinggi.

Gunakan document.documentElement.clientWidth dan document.documentElement.clientHeight

document.documentElement.clientWidth dan document.documentElement.clientHeight boleh digunakan untuk mendapatkan lebar dan ketinggian kawasan yang boleh dilihat ​halaman tersebut. Mereka berguna untuk bekerja dengan resolusi dengan reka bentuk visual yang berbeza.

console.log(document.documentElement.clientWidth); //返回页面的宽度
console.log(document.documentElement.clientHeight); //返回页面的高度

Gunakan skrin.lebar dan skrin.tinggi

skrin.lebar dan skrin.tinggi boleh digunakan untuk mendapatkan lebar dan tinggi skrin semasa. Ini berguna bersama-sama dengan kaedah lain untuk mengubah saiz tetingkap.

console.log(screen.width); //返回屏幕的宽度
console.log(screen.height); //返回屏幕的高度

Secara keseluruhannya, menetapkan saiz tetingkap dalam JavaScript ialah kemahiran yang sangat berguna. Kaedah yang diperkenalkan di atas adalah kaedah yang paling biasa digunakan dan praktikal. Sama ada anda perlu mengubah saiz tetingkap semasa atau mengawal saiz tetingkap penyemak imbas anda, kaedah ini boleh membantu anda menyelesaikan kerja. Saya harap artikel ini dapat memberi anda panduan berguna dalam proses membangunkan projek web.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan saiz tetingkap dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!