窗口相關(guān)尺寸

與窗口相關(guān)的尺寸有視口寬度clientWidth跌前、瀏覽器外寬outterWidth泣港、瀏覽器內(nèi)寬innerHeight铺罢，視口高度clientHeight茫叭、瀏覽器外高outterHeight朝刊、瀏覽器內(nèi)高innerHeight耀里， 這幾個(gè)尺寸會(huì)因?yàn)g覽器的不同略有差異。

PC瀏覽器下

• 標(biāo)準(zhǔn)模式下 document.documentElement.clientWidth 和 document.body.clientWidth 代表視口寬度拾氓，滾動(dòng)條也包含在內(nèi)冯挎。

• window.outterWidth 代表瀏覽器窗口的大小，包含頂部的標(biāo)簽欄咙鞍、地址欄房官、書簽欄等，另外四周還增加了幾像素的陰影也包含在內(nèi)续滋。

• window.innerWidth 代表瀏覽器主體內(nèi)容區(qū)域的寬度翰守，滾動(dòng)條包含在內(nèi)，通常與clientWidth視口尺寸一樣疲酌。

上述三項(xiàng)測試在Chrome蜡峰、IE11了袁、Edge、Firefox湿颅、Safari 中測試通過载绿。

移動(dòng)端瀏覽器上

clientWidth、outterWidth油航、innerHeight 的值均一致崭庸，safari 的 outterWidth 和 outerHeight 均為0。而且 clientWidth谊囚、outterWidth怕享、innerHeight 三個(gè)值均會(huì)隨著瀏覽器地址欄和工具欄的顯示或隱藏而發(fā)生變化，也就是說瀏覽器大小秒啦、視口是一起發(fā)生變化的熬粗。

元素相關(guān)尺寸

元素大小

offsetHeight：元素在垂直方向上占用的空間大小，以像素計(jì)余境。包括元素的高度（含padding）、（可見的）水平滾動(dòng)條高度灌诅、 上邊框高度和下邊框高度芳来。這個(gè)高度可以用來檢測元素的可見區(qū)域。

offsetWidth: 元素在水平方向上占用的空間大小猜拾，以像素計(jì)即舌。包括元素的寬度（含padding）、（可見的）垂直滾動(dòng)條的寬度挎袜、左邊框?qū)挾群陀疫吙驅(qū)挾韧缒簟＿@個(gè)高度可以用來檢測元素的可見區(qū)域。

offsetLeft: 元素的左外邊框至包含元素的左內(nèi)邊框之間的像素距離盯仪。

offsetTop: 元素的上外邊框至包含元素的上內(nèi)邊框之間的像素距離紊搪。

offset.jpg

客戶區(qū)大小

clientWidth: 指的是元素內(nèi)容及其內(nèi)邊距所占據(jù)的空間大小，不包含border全景，滾動(dòng)條空間不計(jì)算在內(nèi)耀石。

注意：滾動(dòng)條一般是位于border的內(nèi)邊緣，蓋住了padding爸黄，但是不占用padding的空間滞伟。

client.jpg

滾動(dòng)大小，得到的值不帶單位

scrollHeight: 在沒有滾動(dòng)條的情況下炕贵，也就是不含滾動(dòng)條（滾動(dòng)條是獨(dú)立的存在）梆奈，元素內(nèi)容的總高度。

scrollWidth: 在沒有滾動(dòng)條的情況下称开，也就是不含滾動(dòng)條（滾動(dòng)條是獨(dú)立的存在）亩钟，元素內(nèi)容的總寬度。

scrollLeft: 被隱藏在內(nèi)容區(qū)域左側(cè)的像素?cái)?shù)。通過設(shè)置這個(gè)屬性可以改變元素的滾動(dòng)位置径荔。

scrollTop: 被隱藏在內(nèi)容區(qū)域上方的像素?cái)?shù)督禽。通過設(shè)置這個(gè)屬性可以改變元素的滾動(dòng)位置。

帶有垂直滾動(dòng)條的頁面總高度：document.documentElement.scrollHeight总处，如果想要獲取文檔高度狈惫，需要找到 scrollHeight 和 clientHeight 中的最大值。

scroll.jpg

參考文獻(xiàn)：
《高級(jí)語言程序設(shè)計(jì) 第三版》