offsetleft
前言:
如果需要动态计算标签的距离时，我们时常会用到这两个属性offsetleft和offsettop，我的使用场景是，我有一个背景的p1，另一个p2并不在p1内，但是我需要让p2在p1的又下角，如果我使用margin-left或margin-top,在不同分辨率之间切换时都会有改变，所以这时候就用到啦这两个属性。
正文：
先粘贴两段代码，你们粘到自己编辑器里试试效果，F12看下控制台的区别
情况一:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/JavaScript">
function codd(){
var obj1=document.getelementbyid('cc');
console.log(obj1.offsetLeft);
console.log(obj1.offsetTop);
}
</script>
</head>
<body>
<p id="aa" style="width:400px; height:400px; background:#0f0; margin-left:10px;">
<p id="bb" style="width:300px; height:300px; background:#00f; margin-left:10px;">
<p id="cc" style="width:200px; height:200px; background:#000; margin-left:10px;" οnclick="codd()"></p>
</p>
</p>
</body>
</html>
情况二：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
function codd(){
var obj1=document.getElementById('cc');
console.log(obj1.offsetLeft);
console.log(obj1.offsetTop);
}
</script>
</head>
<body>
<p id="aa" style="width:400px; height:400px; background:#0f0; margin-left:10px;">
<p id="bb" style="width:300px; height:300px; background:#00f; margin-left:10px; position: absolute;">
<p id="cc" style="width:200px; height:200px; background:#000; margin-left:10px;" οnclick="codd()"></p>
</p>
</p>
</body>
</html>
情况二比情况一多了一个属性position:absolute，这样控制台打印的就不一样啦，重点来啦，在页面任一元素的offsetLeft或offsetTop总是找到离其最近的已经定位的元素定位，如果没有，就根据根节点body定位，然后获取其left值或top值。
总结：
这次没啥好总结的，我叫浪达，一个想成为架构师（hou) (gong) (wang)的程序员
文章最后发布于: 2018-08-07 10:11:22
相关阅读
定位参照点 offsetTop 的定位是相对于 offsetParent 元素的 offsetParent的定义：与当前元素最近的经过定位(position不等于static
offsetTop,offsetHeight,clientHeight图解
动态的计算弹框距离外部元素的位置，即获取元素的offsetLeft、offsetTop、offsetWidth、offsetHeight，如果弹框的宽度（offsetWidth）+距
深度剖析offsetParent、offsetTop、offsetLeft和Paren
深度剖析offsetParent、offsetTop、offsetLeft和ParentNode的区别 ParentNode：是直接结构上的父级，并不是显示父级offsetParent:有
【JavaScript】全面解析offsetLeft、offsetTop
前言：偏移量，很多动画效果的实现都是通过去改变偏移量的改变来实现的，但是你真的完全了解offsetLeft，offsetTop吗？ 一、第一个小例
搞清clientHeight、offsetHeight、scrollHeight、offs
转载自：https://www.imooc.com/article/17571网页可见区域高：document.body.clientHeight网页正文全文高：document.body.scrollHeigh