JavaScript中尺寸、坐标一、尺寸二、坐标

測試環境是IE8，Chrome38，Firefox40，下面是全局通用腳本列印代碼

在container外面我還套了個container_out，寬度為1000px，友善示範用，HTML代碼如下：

1）CSS擷取width、height

 分别在container中，width寫為200px、10%和不設定。

在3個浏覽器中展現的有所不同，如下面表格中所示，IE展現的就是比較與衆不同：

firefox

chrome

IE8

width:200px

200px

width:10%

100px

10%

寬度不設定

956px

 auto

display:none;width:200px

display:none;寬度不設定

auto

position:absolute;width:200px

position:absolute;寬度不設定

0px

2）offsetWidth、offsetHeight

這裡擷取到的資料是沒有機關的，浏覽器結果如下：

224

124

980

 980

24

結合公式和第一張表中對應的資料可以計算出結果

當display:none的時候，得到的資料都為0

3）innerWidth、innerHeight、outerWidth和outerHeight

這4個window屬性在IE6、IE7和IE8不支援。

在Chrome中，outerWidth.outerHeight與innerWidth，innerHeight傳回相同的值，即視口(viewport)大小而非浏覽器視窗大小。

innerWidth

1366

undefined

outerWidth

1382

這裡順便介紹兩個概念：「css像素」、「裝置像素」；css像素和裝置像素 是容納的關系。在縮放倍數是200%的情況下，1個css像素容納了4個裝置像素

我用chrome浏覽器，“control+滑鼠滾輪”進行放大，放到到200%的時候“innerWidth=683”，正好是原來的一半。

是以window.innerWidth度量機關是css pixels。經測試，“offsetWidth”與“clientWidth”也是css pixels，而“screen.width”是裝置像素。

4）clientWidth、clientHeight

clientWidth

1349

1345

5）scrollWidth、scrollHeight

FF：scrollWidth = 網頁内容寬度，不過最小值是clientWidth

scrollWidth

接下來的操作會将#container隐藏掉，CSS添加一條屬性：display: none;

1）offsetTop、offsetLeft

它們是相對于offsetParent的距離，一級級向上累加，就得到相對頁面的坐标。

top

350

left

200

2）node.getBoundingClientRect()

在IE8或者更低浏覽器版本中，getBoudingClientRect()方法傳回的對象中沒有height和width屬性。

1.外面不套relative

left和top與上面的CSS中定義的一樣。

250

100

width

30

height

2.外面套個relative

與上面累加計算的結果一緻，可以看到自己會做計算：

left = left + 父級的left；top = top + 父級的top。

3）clientLeft、clientTop

在coordinate中加了border: 2px solid red，三個浏覽器傳回的都是2

4）scrollTop、scrollLeft和pageYOffset、pageXOffset

“外層元素中的内容”高過了“外層元素”本身.當向下拖動滾動條時，有部分内容會隐沒在“外層元素的上邊界”之外。

我給body設定了高度2000px，然後把滾動條下拉到最下面做測試：

window.pageYOffset

1392

1317

document.documentElement.scrollTop

1416

document.body.scrollTop

在做IE8的測試的時候，每次傳回的都是0，無奈隻能寫個onscroll事件，實時添加高度，并在html中新增标簽p：

通過上面的資料可以看到，雖然數字不一樣，但是都是通過不太一樣的屬性擷取到的，是以需要做相容性的處理：

demo下載下傳：

<a href="http://download.csdn.net/detail/loneleaf1/9132279" target="_blank">http://download.csdn.net/detail/loneleaf1/9132279</a>

參考資料：

    本文轉自 咖啡機（K.F.J）   部落格園部落格，原文連結：http://www.cnblogs.com/strick/p/4826273.html，如需轉載請自行聯系原作者