javascript获取元素距离网页顶部的距离
分类：实例代码
本章节分享一段代码实例，它实现了获取元素距离网页顶部距离的功能。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
* {
padding:0px;
margin:0px;
}
#antzone {
width:200px;
height:100px;
background:#ccc;
margin-top:100px;
margin-left:200px;
text-align:center;
line-height:100px;
}
</style>
<script>
window.onload = function () {
function getDistanceOfLeft(obj) {
var left = 0;
var top = 0;
while (obj) {
left += obj.offsetLeft;
top += obj.offsetTop;
obj = obj.offsetParent;
}
return {
left:left,
top:top
};
}
var odiv = document.getElementById("antzone");
odiv.innerHTML = getDistanceOfLeft(odiv).top;
}
</script>
</head>
<body>
<div id="antzone"></div>
</body>
</html>
本章节分享一段代码实例，它实现了获取元素距离网页顶部的距离。
一.代码注释:
（1）.window.onload = function () {}，当文档内容完全加载完毕再去执行函数中的代码。
（2）.function getDistanceOfLeft(obj) {}，参数是要获取距离的元素对象。
（3）.var left = 0,声明一个变量并赋值为0，用来存储元素距离网页左端的距离。
（4）.while (obj) {
left += obj.offsetLeft;
top += obj.offsetTop;
obj = obj.offsetParent;
}通过循环方式，不断判断获取元素距离上级元素顶端的距离，然后不断累加。
（5）.return {
left:left,
top:top
}，返回一个对象，里面存储了元素距离网页上部和左部的距离。
二.相关阅读:
（1）.offsetLeft可以参阅offsetleft属性一章节。
（2）.offsetParent可以参阅js offsetParent属性一章节。
javascript获取元素距离网页顶部的距离，这样的场景在实际项目中还是用的比较多的，关于javascript获取元素距离网页顶部的距离就介绍到这了。
javascript获取元素距离网页顶部的距离属于前端实例代码，有关更多实例代码大家可以查看。
一线大厂高级前端编写，前端初中阶面试题，帮助初学者应聘，需要联系微信：javadudu