offsetLeft、offsetTop全面解析

最新推荐文章于 2024-08-17 10:56:45 发布

牛奶小柒Luke

最新推荐文章于 2024-08-17 10:56:45 发布

阅读量729

点赞数 1

分类专栏： web html 编程文章标签： html5 html css

本文链接：https://blog.csdn.net/qq_52475404/article/details/120844774

版权

本文详细探讨了offsetLeft和offsetTop属性，通过三个实例解析它们相对于不同定位元素的偏移量计算。当元素及上级元素具有相对定位时，offsetLeft和offsetTop的值会发生变化。文章还介绍了如何通过offsetParent属性结合元素自身的偏移量，计算出元素到浏览器窗口的总偏移量，并提出了解决未知上级定位元素数量问题的解决方案。

摘要由CSDN通过智能技术生成

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