ie ff獲取頁面寬度對比

在作web前端開發的時候，咱們常常要用JavaScript獲取頁面的高度和寬度，但在不一樣的瀏覽器下獲取的方法又不同，或者說方法同樣，但由於IE和FF對web標準的不一樣實現，一樣的方法兩瀏覽器獲得的是不一樣的高度或者寬度。下面就對IE和FF中js獲取頁面高度與寬度作下對比：
一、window.screen.width/.height： 顯示器大小(IE和FF通用)1440 * 900 –> 和瀏覽器是否全屏無關

二、document.documentElement.clientHeight /clientWidth： 瀏覽器可視窗口大小(IE和FF通用)：該值不受樣式表制約，只會隨瀏覽器窗口大小變化。這和document.body.clientWidth 不同。
三、document.body.clientHeight : 文檔高度(IE和FF通用)：和上面同樣，只是取值對象改成BODY，當BODY中無內容時，IE下爲18，FF爲0.當有內容時，則IE值=FF值，此值和BODY中的內容有關，是全部元素高度的總和
四、document.body.clientWidth : 文檔寬度(IE和FF通用，FF會比IE取得值多2PX左右)：如IE 1440，FF：1442，此值和BODY中內容無關，但和樣式有關，如在樣式定義body{width:98px}，則此值爲98，當瀏覽器大小改變時，如不是全屏，此值也會跟着變化。

三、document.documentElement.scrollLeft/scrollTop ：頁面滾動後的左側/頂端位置(IE和FF通用)。
四、document.documentElement.scrollHeight / scrollWidth : 獲取對象的滾動高/寬度(IE和FF通用但有差異) IE/FF差異在於當body總高度小於瀏覽窗口可見區高度時，IE的scrollHeight值爲body實際高度，而FF爲瀏覽器可見區的高度。若是body高度大於瀏覽器可見區，則兩者沒什麼差異。
五、document.documentElement.offsetHeight / offsetWidth : 獲取對象相對於版面或由父座標offsetParent 屬性指定的父座標的寬/高度.(和上面功能相似且IE/FF通用，但差異正好相反) offsetHeight是指瀏覽器可見區的高度，而offsetWidth是指瀏覽器寬度，差異在於當body總高度低於瀏覽窗口可見區高度時，IE的offsetHeight值仍爲瀏覽器可見區的高度,而FF爲body實際高度。若是body高度大於瀏覽器可見區，則兩者沒什麼差異。
注、document.body.offsetHeight 和 document.body.offsetWidth :這對和上面不一樣，對象爲body，在FF/IE下的值都是body的高和寬。不受瀏覽器可視區影響。
另外，當CSS有對BODY的寬作限制時，這時若是頁面有一個div的寬超過這個值，則IE的document.body.clientWidth和offsetWidth等於那個DIV的寬，但FF則仍然保留CSS中對body寬界定的值。

而且要注意的是：若是沒有在CSS中對body定義了 body{margin:0px;width:1239px}，而這時有一個div的值超過了屏幕大小，好比1600px;那麼在IE 中，document.body.offsetWidth/clientWidth或用document.documentElement等等均可以取到 body實際寬值爲那個DIV的寬度，而FF則不論用什麼，body值都是瀏覽器可視區的大小，不會按那個div的寬來計算。
這時要用document.documentElement.scrollWidth（不能用body）來作爲文本的寬度測量。而瀏覽器的可視寬度測量用document.documentElement.clientWidth。以下：

function BrowserAndIEwidth() {
var str2=」

bodyWidth = document.documentElement.scrollWidth // 這裏不能用document.body.
BrowserWidth = document.documentElement.clientWidth

str1 = ‘ BODY的實際寬度 = ‘ +bodyWidth+’，瀏覽器可視寬度 = ‘+BrowserWidth

if (bodyWidth>BrowserWidth){
str2 = ‘body超過了瀏覽器的寬度！’
}

alert(str1+’\n’+str2);
}
// 此函數在IE下當body內容未超範圍時，而且用overflow=」auto」設置事後，取值會不許。
或者分開取值更好：以下函數即爲取得當前頁面的高度：
function(){
if (window.innerHeight && window.scrollMaxY) { // FF
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // IE
yScroll = document.body.scrollHeight;
} else {yScroll = document.body.offsetHeight;}
return yScroll; } 六、offsetLeft:獲取對象相對於版面或由offsetParent 屬性指定的父座標的計算左側位置 七、offsetTop:獲取對象相對於版面或由offsetTop 屬性指定的父座標的計算頂端位置 如下僅爲IE或FF部分適用： 八、window.pageXOffset/pageYOffset: 頁面滾動後的頂端位置(僅FF適用，建議用document.documentElement.scrollLeft/scrollTop)。 九、window.innerWidth /innerHeight: 瀏覽器可視區的大小,即不含瀏覽器菜單、工具欄(僅FF適用，建議用document.documentElement.clientHeight)，改變瀏覽器大小，此值也會改變 十、event.offsetY / .offsetX ：(僅IE適用)光標指針相對於發生事件的對象的左上角的位置，也就是把事件發生區的DIV或TABLE等元素左上角當作座標的0，0開始計算。 十一、event.clientX / .clientY ：(僅IE適用)與offsetX不一樣，clientX是從body窗口左上角開始計算。 十二、在IE下的 event.x 等於FF中的event.pageX 1三、window.scrollMaxX /window.scrollMaxY ：最大可滾動的值。僅FF可用。 應用舉例： 一、當body的寬度沒有受CSS樣式表限制時，如沒有規定body{width:863px}：則 document.body.clientWidth = document.documentElement.scrollWidth 反之當有限制時，則IE的document.documentElement.scrollWidth仍然等於document.body.clientWidth，但FF則document.documentElement.scrollWidth=瀏覽器窗口可視區的大小，只有用document.body.scrollWidth才能相等。也能夠看出兩種瀏覽器對容器的定義不一樣。