offsetTop和scrollTop的差別

2021-09-06 22:07:19 字數 1217 閱讀 1740

近期想寫個元件,結果被這兩個屬性搞的有點暈,查了下文件和資料,對這兩個屬性總結例如以下:

一直以來對offsetleft,offsettop,scrollleft,scrolltop這幾個方法非常迷糊,花了一天的時間好好的學習了一下.得出了下面的結果:

1.offsettop     :

當前物件到其上級層頂部的距離.

不能對其進行賦值.設定物件到頁面頂部的距離請用style.top屬性.

2.offsetleft    :

當前物件到其上級層左邊的距離.

不能對其進行賦值.設定物件到頁面左部的距離請用style.left屬性.

3.offsetwidth   :

當前物件的寬度.

與style.width屬性的差別在於:如物件的寬度設定值為百分比寬度,則不管頁面變大還是變小,style.width都返回此百分比,而offsetwidth則返回在不同頁面中物件的寬度值而不是百分比值

4.offsetheight :

與style.height屬性的差別在於:如物件的寬度設定值為百分比高度,則不管頁面變大還是變小,style.height都返回此百分比,而offsetheight則返回在不同頁面中物件的高度值而不是百分比值

5.offsetparent  :

當前物件的上級層物件.

注意.假設物件是包含在乙個div中時,此div不會被當做是此物件的上級層,(即物件的上級層會跳過div物件)上級層是table時則不會有問題.

利用這個屬性,能夠得到當前物件在不同大小的頁面中的絕對位置.

1function

getposition(obj)213

14alert(

"left is : "+

left +"

/r/n"+

"top  is : "+

top);

156.scrollleft    :

物件的最左邊到物件在當前窗體顯示的範圍內的左邊的距離.

即是在出現了橫向滾動欄的情況下,滾動欄拉動的距離.

7.scrolltop

物件的最頂部到物件在當前窗體顯示的範圍內的頂邊的距離.

即是在出現了縱向滾動欄的情況下,滾動欄拉動的距離.

8.測試offsettop和scrolltop的html**

" width="400" height="500" style="border:1px red solid;" scrolling="no">

offsetLeft和offsetTop怎麼用

如果需要動態計算標籤的距離時,我們時常會用到這兩個屬性offsetleft和offsettop,我的使用場景是,我有乙個背景的div1,另乙個div2並不在div1內,但是我需要讓div2在div1的又下角,如果我使用margin left或margin top,在不同解析度之間切換時都會有改變,所...

offsetTop和scrollTop的差別

近期想寫個元件,結果被這兩個屬性搞的有點暈,查了下文件和資料,對這兩個屬性總結例如以下 一直以來對offsetleft,offsettop,scrollleft,scrolltop這幾個方法非常迷糊,花了一天的時間好好的學習了一下 得出了下面的結果 1.offsettop 當前物件到其上級層頂部的距...

關於offsetTop的理解

1.offsettop 元素到offsetparent頂部的距離 2.offsetparent 距離元素最近的乙個具有定位的祖宗元素 relative,absolute,fixed 若祖宗都不符合條件,offsetparent為body。如下圖所示 獲取child的offsettop,圖1的offs...