智慧前端：js獲取with和height屏幕瀏覽器的各類彙總

時間 2019-12-07

標籤智慧前端獲取 height 屏幕瀏覽器各類彙總欄目 JavaScript 简体版

原文原文鏈接

Document 對象

一、document.body.clientWidth、document.body.clientHeighthtml

返回網頁可見區域寬高spa

二、document.body.offsetWidth、document.body.offsetHeightcode

返回網頁可見區域寬高(包括邊線的寬)orm

三、document.body.scrollWidth、document.body.scrollHeighthtm

返回網頁正文區域寬高
對象

四、document.body.scrollTop、document.body.scrollLeftip

返回網頁被捲去的top寬度和left寬度it

Window 對象

五、window.screenTop、window.screenLeftio

返回窗口相對於屏幕的X和Y座標function

六、window.screen.height、window.screen.width

返回屏幕分辨率的高和寬

七、window.screen.availHeight、window.screen.availWidth

返回屏幕可用工做區高寬

Screen 對象

八、screen.width、screen.height

返回顯示屏幕的分辨率（寬，高）

九、screen.availWidth、screen.availHeight

返回顯示屏幕的寬度和高度 (除 Windows 任務欄以外)

<html>
<script>
function WandH(){
document.write(
"屏幕分辨率爲："+screen.width+"*"+screen.height/*分辨率*/
+"<br />"+
"屏幕可用大小："+screen.availWidth+"*"+screen.availHeight/*除去任務欄*/
+"<br />"+
"網頁可見區域寬："+document.body.clientWidth/*屏幕寬度*/
+"<br />"+
"網頁可見區域高："+document.body.clientHeight/*屏幕高度（可顯）*/
+"<br />"+
"網頁可見區域寬(包括邊線的寬)："+document.body.offsetWidth/*寬(包括邊線的寬)*/
+"<br />"+
"網頁可見區域高(包括邊線的寬)："+document.body.offsetHeight/*高(包括邊線的寬*/
+"<br />"+
"網頁正文全文寬："+document.body.scrollWidth/*網頁可見區域寬："+document.body.clientWidth/*屏幕寬度*/
+"<br />"+
"網頁正文全文高："+document.body.scrollHeight/*網頁可見區域高："+document.body.clientHeight/*屏幕高度（可顯）*/
+"<br />"+
"網頁被捲去的高："+document.body.scrollTop/*滾動高度*/
+"<br />"+
"網頁被捲去的左："+document.body.scrollLeft/*滾動寬度*/
+"<br />"+
"網頁正文部分上："+window.screenTop/*返回窗口相對於屏幕的X和Y座標。*/
+"<br />"+
"網頁正文部分左："+window.screenLeft/**/
+"<br />"+
"屏幕分辨率的高："+window.screen.height/*分辨率*/
+"<br />"+
"屏幕分辨率的寬："+window.screen.width/*分辨率*/
+"<br />"+
"屏幕可用工做區高度："+window.screen.availHeight/**/
+"<br />"+
"屏幕可用工做區寬度："+window.screen.availWidth/**/
);
}
</script>
<body onLoad="WandH()" >
</body>
</html>