Rumah > hujung hadapan web > tutorial js > Ringkasan kaedah untuk mendapatkan lebar dan ketinggian halaman web menggunakan kemahiran javascript_javascript

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

WBOY
Lepaskan: 2016-05-16 15:49:49
asal
1318 orang telah melayarinya

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>
Salin selepas log masuk

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

document.body.clientWidth
document.body.clientHeight
Salin selepas log masuk
Salin selepas log masuk

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

document.body.clientWidth
document.body.clientHeight
Salin selepas log masuk
Salin selepas log masuk

Tetapi IE dan FireFox menggunakan

document.documentElement.clientWidth
document.documentElement.clientHeight
Salin selepas log masuk

Ternyata piawaian W3C yang menyebabkan masalah

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Jika anda menambahkan baris tag ini pada halaman

Dalam IE:

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

Dalam FireFox:

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

Dalam Opera:

document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)
document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
Salin selepas log masuk


Dan jika tiada piawaian W3C yang ditentukan, maka

IE ialah:

document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
Salin selepas log masuk

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.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan