問題：如果獲取元素距離文檔頂部的距離?[javascript] view plain copy

var rect=$('#elem')[0].getBoundingClientRect();

//獲取元素距離文檔頂部的距離

var top=rect.top+(window.pageYOffset||document.documentElement.scrollTop)-(document.documentElement.clientTop||0);

var left=rect.left+(window.pageXOffset||document.documentElement.scrollLeft)-(document.documentElement.clientLeft||0);

該方法的思路來自己jQuery的offset方法

null和undefined都代表沒有，但是null是屬性存在值不存在，undefined是連這個屬性都不存在

//例如document.parentNode//瀏覽器天生自帶的一個屬性：父親節點的屬性 null (因為一個頁面中的document已經是最頂級元素了，它沒有父親)document.parentnode//undefined (因為沒有parentnode這個屬性)

1、parentNode:父親節點 HTML結構層級關系中的上一級元素

var outer = document.getElementById('outer');var inner = document.getElementById('inner');var center = document.getElementById('center');

center.parentNode //inner

2、offsetParent：父級參照物 在同一個平面中，最外層的元素是里面所有元素的父級參照物(和HTML層級結構沒有必然的聯系)

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

document.body.offsetParent // null

想要改變父級參照物需要通過position定位來進行改變(absolute relative fixed 都可以進行改變 )

Document

*{

margin:0;

padding:0;

}

#outer{

width:180px;

height:180px;

margin:50px auto;

border:10px solid #000;

background:orange;

padding:50px;

}

#inner{

width:80px;

height:80px;

padding:50px;

border:10px solid #000;

background:green;

}

#center{

width:50px;

height:50px;

border:10px solid #000;

background:red;

}

outer.style.position = "relative";//這樣inner和center的參照物都是outercenter.offsetParent//outerinner.offsetParent//outerouter.offsetParent//bodyouter.style.position = "relative";// inner.style.position = "relative";

center.offsetParent//innerinner.offsetParent//outerouter.offsetParent//body

3、offsetTop/offsetLeft :當前元素(外邊框)距離其父級參照物(內邊框)的偏移距離

具體如下圖所示：

下面是一個offset方法：等同于jQuery中的offset方法，實現獲取頁面中任意一個元素，距離body的偏移(包含左偏移和上偏移)，不管當前元素的父級參照物是誰。獲取的一個結果是一個對象{left:距離body的左偏移，top:距離body的上偏移}

在標準的IE8瀏覽器中，我們使用offsetLeft/offsetTop其實是把父級參照物的邊框已經算在內了。所以我們不需要自己在單獨加邊框了

代碼如下：

function offset(curEle){var totalLeft = null,totalTop = null,par = curEle.offsetParent;//首先加自己本身的左偏移和上偏移totalLeft+=curEle.offsetLeft;

totalTop+=curEle.offsetTop//只要沒有找到body，我們就把父級參照物的邊框和偏移也進行累加while(par){if(navigator.userAgent.indexOf("MSIE 8.0")===-1){//累加父級參照物的邊框totalLeft+=par.clientLeft;

totalTop+=par.clientTop

} //累加父級參照物本身的偏移totalLeft+=par.offsetLeft;

totalTop+=par.offsetTop

par = par.offsetParent;

}return{

left:totalLeft,

top:totalTop

}

}

console.log(offset(center).left)

總結

以上是生活随笔為你收集整理的php js offset,获取元素的偏移量offset实例详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。