[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 都可以进行改变 ）
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> <style> *{ 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; }</style> </head> <body> <div id="outer"> <div id="inner"> <div id="center"></div> </div> </div> <script>var outer = document.getelementbyid('outer');var inner = document.getelementbyid('inner');var center = document.getelementbyid('center'); 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</script> </body> </html>
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)
以上就是获取元素的偏移量offset实例详解的详细内容。