offsetLeft、offsetTop全面解析

一、第一个小例子


<body>
<style>body { margin:0;  }.box1 { width:300px; height:300px; margin:100px; background:#333; overflow:hidden; }.box2 { width:200px; height:200px; margin:100px; background:#666; overflow:hidden; }.box3 { width:100px; height:100px; margin:100px; background:#999;}
</style>
<div class="box1"><div class="box2"><div class="box3"></div></div>
</div>
<script>var oBox1 = document.querySelector('.box1');var oBox2 = document.querySelector('.box2');var oBox3 = document.querySelector('.box3');console.log('box1: '+ oBox1.offsetLeft +','+ oBox1.offsetTop);console.log('box2: '+ oBox2.offsetLeft +','+ oBox2.offsetTop);console.log('box3: '+ oBox3.offsetLeft +','+ oBox3.offsetTop);
</script>
</body>

①第一个例子中，三个div的上一级的定位元素都是body，body是最外层的定位元素，三个div获取到的offsetLeft值跟offsetTop值都是相对于body的偏移量。

二、第二个小例子（给box1添加相对定位）

<body>
<style>body { margin:0;  }.box1 { width:300px; height:300px; margin:100px; background:#333; overflow:hidden; position:relative;}.box2 { width:200px; height:200px; margin:100px; background:#666; overflow:hidden; }.box3 { width:100px; height:100px; margin:100px; background:#999;}
</style>
<div class="box1"><div class="box2"><div class="box3"></div></div>
</div>
<script>var oBox1 = document.querySelector('.box1');var oBox2 = document.querySelector('.box2');var oBox3 = document.querySelector('.box3');console.log('box1: '+ oBox1.offsetLeft +','+ oBox1.offsetTop);console.log('box2: '+ oBox2.offsetLeft +','+ oBox2.offsetTop);console.log('box3: '+ oBox3.offsetLeft +','+ oBox3.offsetTop);
</script>
</body>

②第二个例子中，box1加上了相对定位，这时候box2，box3的上一级定位元素不再是body了，这时他们获取到的offsetLeft值跟offsetTop值都是相对于box1的偏移量。而box1的上一级定位元素还是body，所以他的偏移量还是相对于body的。

三、第三个小例子（给box1，box2添加相对定位）

<body>
<style>body { margin:0;  }.box1 { width:300px; height:300px; margin:100px; background:#333; overflow:hidden; position:relative; }.box2 { width:200px; height:200px; margin:100px; background:#666; overflow:hidden; position:relative; }.box3 { width:100px; height:100px; margin:100px; background:#999;}
</style>
<div class="box1"><div class="box2"><div class="box3"></div></div>
</div>
<script>var oBox1 = document.querySelector('.box1');var oBox2 = document.querySelector('.box2');var oBox3 = document.querySelector('.box3');console.log('box1: '+ oBox1.offsetLeft +','+ oBox1.offsetTop);console.log('box2: '+ oBox2.offsetLeft +','+ oBox2.offsetTop);console.log('box3: '+ oBox3.offsetLeft +','+ oBox3.offsetTop);
</script>
</body>

③第三个例子中，box1跟box2都加上了相对定位，这时候，box3的上一级定位元素变成是box2，box2的上一级定位元素是box1，box1的上一级定位元素还是body。所以这时候就出现了。三个div的偏移量都为100；

五、扩展(在第三个例子中，假如我想获取到box3到浏览器窗口的偏移量，该怎么去获取呢？)
思路很简单，就是把元素本身的偏移量跟所有上级定位元素的偏移量都加起来就可以了，问题又来了，假如我们不知道他有几个上级定位元素呢？
其实也不难。js不但提供了offsetLeft、offsetTop方法，还提供了offsetParent（获取上一级定位元素对象）的方法。所以现在我们只需封装一个函数就可以了。


function offset(obj,direction){//将top,left首字母大写,并拼接成offsetTop,offsetLeftvar offsetDir = 'offset'+ direction[0].toUpperCase()+direction.substring(1);var realNum = obj[offsetDir];var positionParent = obj.offsetParent;  //获取上一级定位元素对象while(positionParent != null){realNum += positionParent[offsetDir];positionParent = positionParent.offsetParent;}return realNum;
}


<body>
<style>body { margin:0;  }.box1 { width:300px; height:300px; margin:100px; background:#333; overflow:hidden; position:relative; }.box2 { width:200px; height:200px; margin:100px; background:#666; overflow:hidden; position:relative; }.box3 { width:100px; height:100px; margin:100px; background:#999;}
</style>
<div class="box1"><div class="box2"><div class="box3"></div></div>
</div>
<script>var oBox1 = document.querySelector('.box1');var oBox2 = document.querySelector('.box2');var oBox3 = document.querySelector('.box3');function offset(obj,direction){//将top,left首字母大写,并拼接成offsetTop,offsetLeftvar offsetDir = 'offset'+ direction[0].toUpperCase()+direction.substring(1);var realNum = obj[offsetDir];var positionParent = obj.offsetParent;  //获取上一级定位元素对象while(positionParent != null){realNum += positionParent[offsetDir];positionParent = positionParent.offsetParent;}return realNum;}console.log('box1: '+ offset(oBox1,'left') +','+ offset(oBox1,'top'));console.log('box2: '+ offset(oBox2,'left') +','+ offset(oBox2,'top'));console.log('box3: '+ offset(oBox3,'left') +','+ offset(oBox3,'top'));
</script>
</body>

相关资源：【JavaScript】全面解析offsetLeft、offsetTop

offsetLeft、offsetTop全面解析相关推荐

对于offsetWidth,offsetHeight,offsetLeft,offsetTop的理解
如何理解区分offsetWidth,offsetHeight,offsetLeft,offsetTop 在刚开始使用的时候总是不能理解这四个有什么不一样,用在哪里,因为这几个词真的太像了,emmm,总 ...
理清offsetparent()、offsetLeft/offsetTop、offset()、position()
简而言之,它们的概念如下: ① offsetparent() 指的是元素的第一级拥有定位属性(absolute/relative/fixed)的父元素. ② offsetLeft/offsetTop ...
HTMLElement属性：offsetParent,offsetLeft,offsetTop
HTMLElement.offsetParent - Web API 接口参考 | MDN HTMLElement.offsetParent 是一个只读属性,返回一个指向最近的(指包含层级上的最近)包 ...
一文看懂js中元素偏移量（offsetLeft,offsetTop,offsetWidth,offsetHeight）
偏移量(offset dimension) 偏移量:包括元素在屏幕上占用的所有可见空间,元素的可见大小由其高度,宽度决定,包括所有内边距,滚动条和边框大小(注意,不包括外边距). 以下4个属性可以获取 ...
offsetleft和offsettop的使用
offsetLeft 是一个只读属性,返回当前元素相对于 offsetParent 节点左边界的偏移像素值. offsetLeft和offsetTop理解为当前元素距离父元素左上角的偏移值(偏移量 ...
深入理解浏览器解析和执行过程
在我们公司的业务场景中,有很大一部分用户是使用老款安卓机浏览页面,这些老款安卓机性能较差,如果优化不足,页面的卡顿现象会更加明显,此时页面性能优化的重要性就凸显出现.优化页面的性能,需要对浏览器的渲染 ...
offsetLeft 、offsetWidth、scrollHeight等的区别
一.offsetLeft/offsetTop offsetLeft:元素最左边离最近的有定位的父级之间的距离,不带单位. offsetTop:元素最上边离最近的有定位的父级之间的距离,不带单位. 上图 ...
令人头疼的clientTop、scrollTop、offsetTop
2019独角兽企业重金招聘Python工程师标准>>> 参考:http://www.cnblogs.com/gagarinwjj/p/conflict_client_offset_s ...
蒙了吗？offsetLeft、offsetWidth、scrollTop、scrollWidth、event.pageX
1.offsetHeight || offsetWidth = boder + padding + content 两者都是只读属性,如果想 offsetLeft offsetTop 一般是相对于 ...

offsetLeft、offsetTop全面解析

offsetLeft、offsetTop全面解析

offsetLeft、offsetTop全面解析相关推荐

最新文章

热门文章