javascript 中top clientTop scrollTop offsetTop(1/5)

offsetleft

假設 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 指“重設”按鈕距“提交”按鈕右邊框的距離，因為距其左邊最近的是“提交”按鈕的右邊框。

以上屬性在 firefox 中也有效。

另外：我們這裡所說的是指 html 控制項的屬性值，並不是 document.body，document.body 的值在不同瀏覽器中有不同解釋（實際上大多數環境是由於對 document.body 解釋不同造成的，並不是由於對 offset 解釋不同造成的），點擊這裡查看不同點。
標題：offsettop 與 style.top 的區別

預備知識：offsettop、offsetleft、offsetwidth、offsetheight

我們知道 offsettop 可以獲得 html 元素距離上方或外層元素的位置，style.top 也是可以的，二者的區別是：

一、offsettop 返回的是數字，而 style.top 返回的是字串，除了數字外還帶有單位：px。

二、offsettop 唯讀，而 style.top 可讀寫。

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

offsetleft 與 style.left、offsetwidth 與 style.width、offsetheight 與 style.height 也是同樣道理。
標題：clientheight、offsetheight和scrollheight

我們這裡說說四種瀏覽器對 document.body 的 clientheight、offsetheight 和 scrollheight 的解釋，這裡說的是 document.body，如果是 html 控制項，則又有不同，點擊這裡查看。

這四種瀏覽器分別為ie（internet explorer）、ns（netscape）、opera、ff（firefox）。

首頁 1 2 3 4 5 末頁