Ringkasan kaedah untuk mendapatkan lebar dan ketinggian halaman web menggunakan kemahiran javascript_javascript

document.body.clientWidth - lebar kawasan kelihatan halaman web
document.body.clientHeight - ketinggian kawasan kelihatan halaman web

document.body.offsetWidth - lebar kawasan kelihatan halaman web, termasuk lebar tepi dan bar skrol
document.body.offsetHeight - ketinggian kawasan kelihatan halaman web, termasuk ketinggian tepi dan bar skrol [FF, chrom ialah ketinggian keseluruhan halaman, IE opera adalah perkara biasa]

document.body.scrollWidth - jumlah lebar halaman web
document.body.scrollHeight - jumlah ketinggian halaman web

document.body.scrollTop - Apabila terdapat bar skrol, seret bar skrol ke bawah dan ketinggian bahagian yang tidak dipaparkan di atas
document.body.scrollLeft - Sama seperti di atas

window.innerHeight - Ketinggian dalaman tetingkap penyemak imbas

window.innerWidth - Lebar dalaman tetingkap penyemak imbas

window.screenTop - jarak antara bahagian atas dokumen web dan bahagian atas skrin pada bahagian teks halaman web, tetapi FF tidak menyokong Chrom, IE dan Opera berkelakuan berbeza, jadi gunakan dengan berhati-hati]
window.screenLeft - Bahagian kiri teks halaman web [jarak antara bahagian paling kiri dokumen halaman web dan bahagian paling kiri skrin, tetapi FF tidak menyokongnya Chrom, IE dan Opera berkelakuan berbeza, jadi gunakan dengan berhati-hati]

window.screen.height - ketinggian peleraian skrin
window.screen.width - lebar peleraian skrin

window.screen.availHeight - ketinggian kawasan kerja tersedia [keseluruhan skrin tetapi tidak termasuk bar tugas bawah]
window.screen.availWidth - Lebar kawasan kerja yang tersedia [lebar keseluruhan skrin]

window.screen.clorDepth - warna skrin, biasa digunakan 16, 32 bit, dsb.
window.screen.deviceXDPI - piksel skrin/inci [disokong oleh IE, tidak disokong oleh orang lain]

Kaedah JavaScript untuk mendapatkan lebar dan ketinggian halaman

<script>
function getInfo()
{
  var s = "";
  s += " 网页可见区域宽："+ document.body.clientWidth;
  s += " 网页可见区域高："+ document.body.clientHeight;
  s += " 网页可见区域宽："+ document.body.offsetWidth + " (包括边线和滚动条的宽)";
  s += " 网页可见区域高："+ document.body.offsetHeight + " (包括边线的宽)";
  s += " 网页正文全文宽："+ document.body.scrollWidth;
  s += " 网页正文全文高："+ document.body.scrollHeight;
  s += " 网页被卷去的高(ff)："+ document.body.scrollTop;
  s += " 网页被卷去的高(ie)："+ document.documentElement.scrollTop;
  s += " 网页被卷去的左："+ document.body.scrollLeft;
  s += " 网页正文部分上："+ window.screenTop;
  s += " 网页正文部分左："+ window.screenLeft;
  s += " 屏幕分辨率的高："+ window.screen.height;
  s += " 屏幕分辨率的宽："+ window.screen.width;
  s += " 屏幕可用工作区高度："+ window.screen.availHeight;
  s += " 屏幕可用工作区宽度："+ window.screen.availWidth;
  s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";
  s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";
  //alert (s);
}
getInfo();
</script>

Dalam ujian tempatan saya:
Boleh digunakan di bawah IE, FireFox dan Opera

document.body.clientWidth
document.body.clientHeight

Anda boleh dapatkannya sekarang, ia sangat mudah dan mudah.
Dan antara projek syarikat:
Opera masih menggunakan

document.body.clientWidth
document.body.clientHeight

Tetapi IE dan FireFox menggunakan

document.documentElement.clientWidth
document.documentElement.clientHeight

Ternyata piawaian W3C yang menyebabkan masalah

958d744a298c46c0daa211c304ba8ee6
Jika anda menambahkan baris tag ini pada halaman

Dalam IE:

document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

Dalam FireFox:

document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

Dalam Opera:

document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

Dan jika tiada piawaian W3C yang ditentukan, maka

IE ialah:

document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0

FireFox ialah:

Salin kod Kod adalah seperti berikut:

document.documentElement.clientWidth ==> , lebar objek BADAN ditambah lebar jidar atas)
document.documentElement.clientHeight ==> Ketinggian objek halaman (iaitu, ketinggian objek BODY ditambah ketinggian Margin)

Opera ialah:

Salin kod Kod adalah seperti berikut:

document.documentElement.clientWidth ==> (iaitu. Lebar Objek BADAN campur lebar Margin)
document.documentElement.clientHeight ==> Ketinggian objek halaman (iaitu, ketinggian objek BODY ditambah ketinggian Margin)

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.