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 的值才會相同。

創作者介紹
創作者 大笨鳥 的頭像
大笨鳥

大笨鳥的私房菜

大笨鳥 發表在 痞客邦 留言(0) 人氣()