接觸一段時(shí)間的JavaScript，總是對(duì)瀏覽器的窗口、視口、元素的大小分不清，不清楚使用場景，這次趁著第二次閱讀《JavaScript高級(jí)程序設(shè)計(jì)語言（第三版）》的機(jī)會(huì)，來對(duì)它們做一個(gè)總結(jié)，加深印象，減少困惑。

窗口和視口的問題

不同的瀏覽器，不同版本的瀏覽器以及不同的客戶端，所表現(xiàn)出來的窗口和視口信息都有所差異。
在IE9+。Firefox、Safari、Chrome和Opera 提供了四個(gè)屬性：innerWidth、innerHeight、outerHeight和outerWidth。在IE9+、Safari和Firefox中，outerWidth 和 outerHeight 返回的是頁面窗口的大??；而在Opera中，outerWidth 和 outerHeight 返回的是頁面視圖容器的大小，innerWidth 和 innerHeight 這表示不包括邊框的頁面視圖容器的大??；在chrome中，這四個(gè)屬性返回的值是相同的，即視口（viewport）的大小而非是瀏覽器窗口的大小。
在IE8及更早的版本沒有提供取得當(dāng)前瀏覽器的窗口尺寸屬性；不過可以通過DOM 的頁面可見區(qū)域的信息獲得頁面視口的大小，如下代碼顯示：

var pageWidth = window.innerWidth;
var pageHeight = window.innerHeight;
if(typeof pagewidth != "number") {
  if(document.compatMode == "CSS1Compat") {
    pageWidth = document.documentElement.clientWidth;
    pageHeight = document.documentElement.clientHeight;
  } else {
    pageWidth = document.body.clientWidth;
    pageHeight = document,body.clientheight；
  }
}

以上代碼中，CSS1Compat 是指瀏覽器的渲染模式為標(biāo)準(zhǔn)模式，還有一個(gè)渲染模式是混雜模式：backCompat，是針對(duì)IE8及更早版本。

對(duì)于移動(dòng)設(shè)備：
window.innerWidth和window.innerHeight保存著可見視口（屏幕上可見區(qū)域的大?。?，移動(dòng)IE瀏覽器不支持這些屬性，但通過document.documentElement.clientWidth和document.documentElement.clientHeight提供了相同的信息，隨著頁面的變化，這些值也會(huì)相應(yīng)變化。

在其他移動(dòng)瀏覽器中，document.documentElement度量的是布局視口，即渲染后頁面的實(shí)際大?。梢娨暱谑钦麄€(gè)頁面中的一部分），移動(dòng)IE瀏覽器把布局視口的信息保存在document.body.clientWidth和document.body.clientHeight中，這些值不會(huì)隨著頁面縮放而變化。

元素大小問題

clientWidth 和 clientHeight
這兩個(gè)屬性值的是：元素的內(nèi)容及其內(nèi)邊距所占據(jù)的空間，如下圖所示：

image.png

如上圖顯示，這兩個(gè)屬性并不包括邊框的寬度。

offsetWidth、offsetHeight、offsetLeft 和 offsetTop
offsetWidth：元素在水平方向上占用的空間大小，以像素計(jì)。包含元素的寬度、垂直滾動(dòng)條的寬度和邊框?qū)挾取?br> offsetHeight：元素在垂直方向上占用的空間的大小，以像素計(jì)。包含元素的高度、水平滾動(dòng)條的高度和邊框的寬度。
offsetLeft： 元素左邊框至包含元素（offsetParent）的左內(nèi)邊框之間的距離。
offsetHeight：元素上邊框至包含元素（offsetParent）的上邊框之間的距離。
如下圖顯示上述四個(gè)屬性之間的關(guān)系：

image.png

滾動(dòng)大?。ò瑵L動(dòng)內(nèi)容的元素的東西）：scrollHeight、scrollWidth、scrollLeft 和 scrollTop
scrollHeight：在沒有滾動(dòng)條的情況下，元素內(nèi)容的總高度。
scrollWidth： 在沒有滾動(dòng)條的情況下，元素內(nèi)容的總寬度。
scrollTop：被隱藏在內(nèi)容區(qū)域上方的像素?cái)?shù)。
scrollLeft：被隱藏在內(nèi)容區(qū)域左側(cè)的像素?cái)?shù)。

image.png

戳我博客