如何用JAVASCRIPT獲取當前窗口的高度和寬度

收藏

如何用JAVASCRIPT獲取當前窗口的高度和寬度

<SCRIPT LANGUAGE="JavaScript">
var  s = "";
s += "\r\n網頁可見區域寬："+ document.body.clientWidth;
s += "\r\n網頁可見區域高："+ document.body.clientHeight;
s += "\r\n網頁可見區域寬："+ document.body.offsetWidth  +" (包括邊線和滾動條的寬)";
s += "\r\n網頁可見區域高："+ document.body.offsetHeight +" (包括邊線的寬)";
s += "\r\n網頁正文全文寬："+ document.body.scrollWidth;
s += "\r\n網頁正文全文高："+ document.body.scrollHeight;
s += "\r\n網頁被捲去的高："+ document.body.scrollTop;
s += "\r\n網頁被捲去的左："+ document.body.scrollLeft;
s += "\r\n網頁正文部分上："+ window.screenTop;
s += "\r\n網頁正文部分左："+ window.screenLeft;
s += "\r\n屏幕分辨率的高："+ window.screen.height;
s += "\r\n屏幕分辨率的寬："+ window.screen.width;
s += "\r\n屏幕可用工做區高度："+ window.screen.availHeight;
s += "\r\n屏幕可用工做區寬度："+ window.screen.availWidth;
s += "\r\n你的屏幕設置是 "+ window.screen.colorDepth +" 位彩色";
s += "\r\n你的屏幕設置 "+ window.screen.deviceXDPI +" 像素/英寸";
alert(s);
</SCRIPT>
複製代碼

JQ獲取當前窗口的高度和寬度

alert($(window).height()); //瀏覽器時下窗口可視區域高度
alert($(document).height()); //瀏覽器時下窗口文檔的高度
alert($(document.body).height());//瀏覽器時下窗口文檔body的高度
alert($(document.body).outerHeight(true));//瀏覽器時下窗口文檔body的總高度 包括border padding margin
alert($(window).width()); //瀏覽器時下窗口可視區域寬度
alert($(document).width());//瀏覽器時下窗口文檔對於象寬度
alert($(document.body).width());//瀏覽器時下窗口文檔body的高度
alert($(document.body).outerWidth(true));//瀏覽器時下窗口文檔body的總寬度 包括border padding margin
 
alert($(document).scrollTop()); //獲取滾動條到頂部的垂直高度
alert($(document).scrollLeft()); //獲取滾動條到左邊的垂直寬度
複製代碼

• offsetWidth 實際獲取的是盒模型 (width+border + padding)

總結

• 窗口可視區域寬度： document.documentElement.clientWidth || document.body.clientWidth;

• 窗口可視區域高度： document.documentElement.clientHeight || document.body.clientHeight;

• 窗口可視區域寬度+邊線和滾動條： document.body.offsetWidth ;

• 窗口可視區域高度+邊線和滾動條： document.body.offsetHeight ;

• 實際內容的寬度： document.body.scrollWidth;

• 實際內容的高度： document.body.scrollHeight;

• 滾動條下拉被捲起來的距離：document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

• 滾動條側拉被捲起來的距離：document.body.scrollLeft || document.documentElement.scrollLeft ;

• 網頁正文部分上：window.screenTop;

• 網頁正文部分左：window.screenLeft;

• 元素的寬度：obj.offsetWidth;

• 元素的高度：obj.offsetHeight;

• 相對於父元素的上位移：obj.offsetTop;（在元素的包含元素不含滾動條的狀況下）

• 相對於父元素的左位移：obj.offsetLeft;（在元素的包含元素不含滾動條的狀況下） #參考

• 得到當前窗口的寬度

• 原生js獲取瀏覽器窗口及元素寬高經常使用方法集合

• js中獲取窗口高度的方法