offsetTop、offsetLeft、offsetWidth、offsetHeight、style中的樣式

< DOCTYPE html PUBLIC -WCDTD XHTML StrictEN httpwwwworgTRxhtmlDTDxhtml-strictdtd>

假設 obj 為某個 HTML 控件。

obj.offsetTop 指 obj 距離上方或上層控件的位置，整型，機關像素。

obj.offsetLeft 指 obj 距離左方或上層控件的位置，整型，機關像素。

obj.offsetWidth 指 obj 控件自身的寬度，整型，機關像素。

obj.offsetHeight 指 obj 控件自身的高度，整型，機關像素。

我們對前面提到的“上方或上層”與“左方或上層”控件作個說明。

例如：

<div id="tool">

      <input type="button" value="送出">

      <input type="button" value="重置">

</div>

“送出”按鈕的 offsetTop 指“送出”按鈕距“tool”層上邊框的距離，因為距其上邊最近的是 “tool” 層的上邊框。

“重置”按鈕的 offsetTop 指“重置”按鈕距“tool”層上邊框的距離，因為距其上邊最近的是 “tool” 層的上邊框。

“送出”按鈕的 offsetLeft 指“送出”按鈕距“tool”層左邊框的距離，因為距其左邊最近的是 “tool” 層的左邊框。

“重置”按鈕的 offsetLeft 指“重置”按鈕距“送出”按鈕右邊框的距離，因為距其左邊最近的是“送出”按鈕的右邊框。

offsetTop 可以獲得 HTML 元素距離上方或外層元素的位置，style.top 也是可以的，二者的差別是：

一、offsetTop 傳回的是數字，而 style.top 傳回的是字元串，除了數字外還帶有機關：px。

二、offsetTop 隻讀，而 style.top 可讀寫。

三、如果沒有給 HTML 元素指定過 top 樣式，則 style.top 傳回的是空字元串。

offsetLeft 與 style.left、offsetWidth 與 style.width、offsetHeight 與 style.height 也是同樣道理。

scrollHeight: 擷取對象的滾動高度。  

scrollLeft:設定或擷取位于對象左邊界和視窗中目前可見内容的最左端之間的距離

scrollTop:設定或擷取位于對象最頂端和視窗中可見内容的最頂端之間的距離

scrollWidth:擷取對象的滾動寬度

offsetHeight:擷取對象相對于版面或由父坐标 offsetParent 屬性指定的父坐标的高度

offsetLeft:擷取對象相對于版面或由 offsetParent 屬性指定的父坐标的計算左側位置

offsetTop:擷取對象相對于版面或由 offsetTop 屬性指定的父坐标的計算頂端位置  

event.clientX 相對文檔的水準座标

event.clientY 相對文檔的垂直座标

event.offsetX 相對容器的水準坐标

event.offsetY 相對容器的垂直坐标  

document.documentElement.scrollTop 垂直方向滾動的值

event.clientX+document.documentElement.scrollTop 相對文檔的水準座标+垂直方向滾動的量  

以上主要指IE之中，FireFox差異如下：

IE6.0、FF1.06+：

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5：

clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height

(需要提一下：CSS中的margin屬性，與clientWidth、offsetWidth、clientHeight、offsetHeight均無關)

本文轉自 netcorner 部落格園部落格，原文連結：http://www.cnblogs.com/netcorner/archive/2007/10/28/2912268.html  ，如需轉載請自行聯系原作者