近期想寫個元件,結果被這兩個屬性搞的有點暈,查了下文件和資料,對這兩個屬性總結例如以下:
一直以來對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...