全面解析JavaScript中offsetLeft、offsetTop的用法

更新时间：2023年04月23日 15:37:41 作者：汪小穆

本文主要介绍了全面解析JavaScript中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；

四、解析

通过上面的三个例子不难看出，offsetLeft值跟offsetTop值的获取跟父级元素没关系，而是跟其上一级的定位元素(除position:static;外的所有定位如fixed,relative,absolute)有关系。

五、扩展(在第三个例子中，假如我想获取到box3到浏览器窗口的偏移量，该怎么去获取呢？)

思路很简单，就是把元素本身的偏移量跟所有上级定位元素的偏移量都加起来就可以了，问题又来了，假如我们不知道他有几个上级定位元素呢？

其实也不难。js不但提供了offsetLeft、offsetTop方法，还提供了offsetParent（获取上一级定位元素对象）的方法。所以现在我们只需封装一个函数就可以了。

function offset(obj,direction){
    //将top,left首字母大写,并拼接成offsetTop,offsetLeft
    var 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,offsetLeft
	var 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的用法的文章就介绍到这了,更多相关JavaScript offsetLeft offsetTop内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

js中的this关键字详解
this是Javascript语言的一个关键字它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用,下面分四种情况，详细讨论this的用法，感兴趣的朋友可以了解下
2013-09-09
利用Echarts实现图例显示百分比效果
EChart开源来自百度商业前端数据可视化团队，基于html5 Canvas，是一个纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。本文将利用EChart实现图例中显示百分比的效果，感兴趣的可以学习一下
2022-03-03
微信小程序实现watch监听
这篇文章主要介绍了微信小程序实现watch监听，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-06-06
JS面向对象编程之对象使用分析
在AJAX兴起以前，很多人写JS可以说都是毫无章法可言的，基本上是想到什么就写什么，就是一个接一个的函数function，遇到重复的还得copy，如果一不小心函数重名了，还真不知道从何开始查找错误
2010-08-08
当json键为数字时的取值方法解析
对于数字键名或者非正常变量字符（比如有空格），必须使用 aa[x]的方式
2013-11-11
漂亮! js实现颜色渐变效果
很神奇！js实现颜色渐变效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-08-08
JavaScript实现商品放大镜效果
这篇文章主要为大家详细介绍了JavaScript实现商品放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10
javascript实现设置、获取和删除Cookie的方法
这篇文章主要介绍了javascript实现设置、获取和删除Cookie的方法,涉及javascript操作cookie的常用技巧,非常简单实用,需要的朋友可以参考下
2015-06-06
js中textContent、innerText和innerHTML的用法以及区别
这篇文章主要介绍了JavaScript中textContent、innerText和innerHTML的用法以及区别,需要的朋友可以参考下
2023-05-05
用Javascript数组处理多个字符串的连接问题
小技巧用Javascript数组处理多个字符串的连接问题，大家可以参考下。
2009-08-08