如何用原生js封裝jQuery中的offset方法

2021-10-03 05:31:16 字數 1071 閱讀 8301

這個方法是基於原生js中的 offsetparent 、offsettop 、offsetleft、clientleft、clienttop 來完成的,在jquery中這個元素是用來獲取當前元素在當前視口的相對偏移。

clientleft \ clienttop 指的是元素父元素左邊框和上邊框 (包括border和padding)

offsetleft:元素的邊框的外邊緣距離與已定位的父容器(offsetparent)的左邊距離(不包括元素的邊框和父容器的邊框)。

offsettop:同理是指元素的邊框的外邊緣距離與已定位的父容器(offsetparent)的上邊距離(不包括元素的邊框和父容器的邊框)。

}然而在標準的ie8中,offsetleft \ offsettop 會把父元素的邊框也會算進去,所以我們需要做一些處理,

在ie8下返回的是

「mozilla/4.0 (compatible; msie 8.0; windows nt 6.1; trident/4.0; slcc2; .net clr 2.0.50727; .net clr 3.5.30729; .net clr 3.0.30729; media center pc 6.0; tablet pc 2.0)」

msie 8.0代表的就是 ie8 也就是我們只需要判斷這個字元中是否含有msie 8.0就可以了

function

offset

(curele)

l += par.offsetleft;

//獲得元素距離父元素左偏移多少

t += par.offsettop;

//獲得元素距離父元素上偏移多少

par = par.offsetparent;

}return

}

原生js封裝函式

原理是對元素的所有的子節點做乙個遍歷。然後做乙個判斷,如果是子元素節點 nodetype 1 則遍歷該子元素的所有的子節點,用遞迴檢查是否包含空白節點 如果處理的子節點是文字節點 nodetype 3 則檢查是否是純粹的空白節點,如果是,就將它從xml物件中刪除。1 function removew...

原生JS封裝AJAX

今天我們來說說利用原生js封裝ajax.jquery框架的ajax方法確實很好用,但有時候我們寫的頁面需要引入多個js外掛程式,不一定哪個外掛程式就會和jquery發生衝突,導致jquery用不了了.或者頁面比較簡單,不需要加重瀏覽器的負擔,這時我們自己封裝乙個ajax就是乙個很好的辦法.將資料轉換...

如何用原生js封裝乙個類似jq的選擇器

id選擇器 在整個文件中獲取id為 的元素 document.getelementid id 類名選擇器 在整個文件中或者在指定上下文中獲取類名為 的元素 document.getelementsbyclassname context getelementsbyclassname 標籤名選擇器 在整...