JS獲取屏幕、頁面大小、分辨率

document.body.clientWidth

獲取body元素對象的內容可視區域的寬度,即clientWidth=width+padding,不包括滾動條。

document.body.clientHeight

獲取body元素對象的內容可視區域的高度,即clientHeight=height+padding,不包括滾動條。
瀏覽器兼容性

在IE7中,如果給body設置滾動條的話,滾動條是出現在body內部的。所以當給body設置width和height時,在IE7中clientWidth和clientHeight的值是要比其它瀏覽器中的值小一些的。

document.body.offsetWidth

獲取body元素對象的寬度,即offsetWidth=width+padding+border,也可以寫成offsetWidth=clientWidth+border。

document.body.offsetHeight

獲取body元素對象的高度,即offsetHeight=height+padding+border,也可以寫成offsetHeight=clientHeight+border。

瀏覽器兼容性

在IE7中,如果給body設置滾動條的話,滾動條是出現在body內部的。所以offsetWidth和offsetHeight的值還需要加上滾動條的寬度。當然最終的值和其它瀏覽器是一樣的。

document.body.scrollWidth

獲取body元素對象內容的實際寬度,即對象的滾動寬度。

document.body.scrollHeight

獲取body元素對象內容的實際高度,即對象的滾動高度。
瀏覽器兼容性

在FireFox和IE中,其獲取的就是body元素對象內部內容的實際寬高。
在Chrome、Safari、Opera中,scrollWidth和scrollHeight獲取的是整個頁面文檔的滾動寬高。

document.body.clientLeft

獲取body元素對象的左邊框的寬度。

document.body.clientTop

獲取body元素對象的上邊框的寬度。

瀏覽器兼容性

各瀏覽器表現一致。

document.body.offsetLeft

獲取body元素對象相對於自身的位置。

document.body.offsetTop

獲取body元素對象相對於自身的位置。
瀏覽器兼容性

在Chrome、Opera、Safari、IE8、IE9和IE10中,工作正常,offsetLeft和offsetTop的值都爲0。
在FireFox中,offsetLeft和offsetTop的值爲負的body元素的border-width。
在IE7中,offsetLeft和offsetTop指的是body元素對象的邊框(不包括邊框)到頁面文檔邊緣的距離。

document.body.scrollLeft

獲取頁面文檔向右滾動過的像素數。

document.body.scrollTop

獲取頁面文檔向下滾動過的像素數。

瀏覽器兼容性

在FireFox、IE8、IE9和IE10中,scrollLeft和scrollTop的值始終爲0。
在IE7中,scrollLeft和scrollTop的值爲body元素對象最頂端和對象內容的最頂端之間的距離,即滾動條滾過的距離。
// 獲取窗口寬度
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
// 獲取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
// 通過深入 Document 內部對 body 進行檢測,獲取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章