1. 程式人生 > >js獲取瀏覽器和螢幕的各種寬度高度

js獲取瀏覽器和螢幕的各種寬度高度

一:網頁可見區域寬高,不包括工具欄和滾動條(瀏覽器視窗可視區域大小)

1.對於IE9+、chrome、firefox、Opera、Safari:

window.innerHeight瀏覽器視窗的內部高度;

window.innerWidth瀏覽器視窗的內部寬度;

2.對於IE8.7.6.5:

document.documentElement.clientHeight:表示HTML文件所在視窗的當前高度;

document.documentElement.clientWidth:表示HTML文件所在視窗的當前寬度;

或者,因為document物件的body屬性對應HTML文件的<body>標籤,所以也可表示為:

document.body.clientHeight:表示HTML文件所在視窗的當前高度;

document.body.clientWidth:表示HTML文件所在視窗的當前寬度;

結論:

document.body.clientWidth/Height:的寬高偏小,高甚至預設200;

document.documentElement.clientWidth/Height 和 window.innerWidth/Height 的寬高始終相等。

所以在不同瀏覽器都實用的的Javascripit方案:

?
12var w = document.documentElement.clientWidth || document.body.clientWidth;
var h = document.documentElement.clientHeight || document.body.clientHeight;

二:網頁正文全文寬高

scrollWidth和scrollHeight獲取網頁內容高度和寬度

1.針對IE.Opera:scrollHeight是網頁內容實際高度,可以小於clientHeight;

2.針對NS.firefox:scrollHeight是網頁內容高度,不過最小值是clientHeight;也就是說網頁內容實際高度小於clientHeight的時候,scrollHeight返回clientHeight;

3.瀏覽器相容程式碼:

?
12var
w = document.documentElement.scrollWidth || document.body.scrollWidth;var h = document.documentElement.scrollHeight || document.body.scrollHeight;

二:網頁可見區域寬高,包括滾動條等邊線(會隨視窗的顯示大小改變)

1.值:   offsetWidth = scrollWidth + 左右滾動條 +左右邊框;

    offsetHeight = scrollHeight + 上下滾動條 + 上下邊框;

2.瀏覽器相容程式碼:

?
12var w = document.documentElement.offsetWidth || document.body.offsetWidth ;var h = document.documentElement.offsetHeight || document.body.offsetHeight ;

三:網頁捲去的距離與偏移量

1.scrollLeft:設定或獲取位於給定物件左邊界與視窗中目前可見內容的最左端之間的距離;

2.scrollTop:設定或獲取位於給定物件最頂端與視窗中目前可見內容的最左端之間的距離;

3.offsetLeft:設定或獲取位於給定物件相對於版面或由offsetParent屬性指定的父座標的計算左側位置;

4.offsetTop:設定或獲取位於給定物件相對於版面或由offsetParent屬性指定的父座標的計算頂端位置;