JS 獲取元素的偏移量

2022-08-26 13:21:23 字數 1008 閱讀 4782

curele.parentnode

document.parentnode -> null

offsetparent: 父級參照物

在同乙個平面中, 最外層的元素是裡面所有元素的父級參照物(和html層級結構沒有必然的聯絡)

一般來說乙個頁面中所有的父級參照物都是body

body的父級參照物是null

使用position

想要改變父級參照物需要通過positon定位來進行改變: absolute, relative, fixed 任意乙個值都可以把父級參照物進行修改

不能修改的有, static, inherit

offsettop/ offsetleft, 當前元素(外邊框)距離其父級參照物的(內邊框)偏移距離

獲取距離body的左偏移

求出頁面中任意乙個元素(不管它的父級參照物是誰)距離body的左偏移

圖示:

**offset: 等同於jquery中的offset方法, 實現獲取頁面中任意乙個元素, 距離body的偏移(包括左偏移和上偏移), 不管當前元素的父級參照物是誰

function offset(curele) 

return ;

}

相容

在標準的ie8瀏覽器中, 我們使用offsetleft/ offsettop, 其實是把父級參照物的邊框已經算在內了, 所以我們不需要自己再單獨的加邊框了

以下是相容ie8瀏覽器的**

function offset(curele) 

totallleft += par.offsetleft;

totaltop += par.offsettop;

par = par.offsetparent;

}return ;

}

JQUERY獲取元素高度 寬度 偏移量

obj scroll 元素滾動事件 window resize 瀏覽器視窗伸縮事件 obj scrolltop 獲取滾動距離 上側 obj scrollleft 獲取滾動距離 左側 obj offset top 獲取元素到頁面頂端的距離 obj offset left 獲取元素到頁面左側的距離 ob...

JQuery元素座標,偏移量

獲取瀏覽器顯示區域的高度 window height 獲取瀏覽器顯示區域的寬度 window width 獲取頁面的文件高度 document.body height 獲取頁面的文件寬度 document.body width 距離滾動條 document.documentelement scrol...

元素偏移量 o set 系列

btn.disabled false 4.1 的構成 成員含義 protocol 通訊協議 通常用http ftp maito等 host 主機 網域名稱 例如 www.zhaoss.com port 埠號可選 為空時 為使用方案的預設埠號 例如http的預設埠號為80 path 路徑 由零個或多個...