大笨鳥的私房菜

JavaScript 最常用的用法之一為操作頁面上的 DOM elemnt，而 DOM element 屬性中，同樣都是寬度，就有區分為 offsetWidth、clientWidth 與 offsetWidth 這幾種，而這之間的差別如下：

• scrollWidth : 
  element 的真正寬度，會依其內容而有所增加，並不一定會是設定在 style 中的 width 的值。
  其值也不包含自身的邊線 (border) 寬度，但若是其內容是一個比自身還寬 element，
  則在 Firefox 與 Chrome 中，會計算內容 element 的 border 寬度，而在 IE 中則不會 (請看範例)。
• clientWidth :
  element 不包含邊線 (border) 與捲軸 (scrollbar) 的可視寬度。
  此值 border 為 0 時，IE 與 Firefox、Chrome 是一樣的，但若 border 不為 0，則此值在此兩種瀏覽器會有所不同，原因請看範例說明。
• offsetWidth :
  element  包含邊線 (border) 與捲軸 (scrollbar) 的可視寬度。
  此值 border 為 0 時，IE 與 Firefox、Chrome 是一樣的，但若 border 不為 0，則此值在此兩種瀏覽器會有所不同，原因請看範例說明。
   
  
  
  

以下為範例：

說明：

    HTML:
            我們將外圈的 div (id='t2') 的 width 設為 200px，border 設為 1px，
            而內圈的 div (id='t1') 的 width 設為 400px，border 設為 5px

    Javascript:

var div = document.getElementById('t2')
var scrollWidth = div.scrollWidth;
var clientWidth = div.clientWidth;
var offsetWidth = div.offsetWidth;

結果： 

    IE：scrollWidth = 400
          clientWidth = 181
          offsetWidth = 200

    Firefox 與 Chrome：
          scrollWidth  = 410
          clientWidth  = 183
          offsetWidth = 202

說明：
    首先，這裏要先說明 IE 與 Firefox、Chrome 對 width 設定不同處，因為這不同處會造成 IE 與 Firefox 在得到 scrollWidth、clientWidth、offsetWidth 值會不一樣。在 IE 下，當 element 的 width 設定時，代表的是包含 border 的 width，但在 Firefox 與 Chrome 中，width 的設定值並不包含 border。

以上為例，t2 的 width 設定為 200，其 offsetWidth 值在 IE 下為 200，但在 Firefox 與 Chrome 下則為 202 (width : 200 加上左邊寬 1 加上右邊寬 1)，而這個值，則是當做 scrollWidth、clientWidth 時的基礎值。所以，

在 IE 下
    scrollWidth = t1 的 offsetWidth = 400
    clientWidth = offsetWidth - 左邊寬 - 右邊寬 - 捲軸寬 = 200 - 1 - 1 - 17 = 181

在 Firefox 與 Chrome 下
    scrollWidth = t1 的 offsetWidth = t1 的 width 值 + 左邊寬 + 右邊寬 = 400 + 5 + 5 = 410
    clientWidth = offsetWidth - 左邊寬 - 右邊寬 - 捲軸寬 = 202 - 1 - 1 - 17 = 183 

由以上可以延伸得知，當所有的 element 的 border 皆為 0 時，IE 與 Firefox、Chrome 在 scrollWidth、clientWidth、offsetWidth 的值才會相同。