offsetLeft和offsetTop怎么用

前言:

如果需要动态计算标签的距离时，我们时常会用到这两个属性offsetLeft和offsetTop，我的使用场景是，我有一个背景的div1，另一个div2并不在div1内，但是我需要让div2在div1的又下角，如果我使用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><div id="aa" style="width:400px; height:400px; background:#0f0; margin-left:10px;"><div id="bb" style="width:300px; height:300px; background:#00f; margin-left:10px;"><div id="cc" style="width:200px; height:200px; background:#000; margin-left:10px;" onclick="codd()"></div></div></div></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><div id="aa" style="width:400px; height:400px; background:#0f0; margin-left:10px;"><div id="bb" style="width:300px; height:300px; background:#00f; margin-left:10px;  position: absolute;"><div id="cc" style="width:200px; height:200px; background:#000; margin-left:10px;" onclick="codd()"></div></div></div></body>
</html>

情况二比情况一多了一个属性position:absolute，这样控制台打印的就不一样啦，重点来啦，在页面任一元素的offsetLeft或offsetTop总是找到离其最近的已经定位的元素定位，如果没有，就根据根节点body定位，然后获取其left值或top值。

总结：

这次没啥好总结的，我叫浪达，一个想成为架构师（hou) (gong) (wang)的程序员

offsetLeft和offsetTop怎么用相关推荐

正确使用pageX、pageY、offsetLeft、offsetTop
获取鼠标位置的时候,遇到一点疑问,然后验证了一下自己的疑惑: pageX.pageY跟clientX和clientY类似,是相对于浏览器文档的坐标: offsetLeft.offsetTop获取的是固 ...
offset家族/`offsetParent`-定位父级/真实宽高：offsetWidth，offsetHeight/offsetLeft和offsetTop
01-offset家族.真实宽高:offsetWidth,offsetHeight.-真实偏移:margin和定位的偏移组合:offsetLeft和offsetTop <style>.bo ...
HTMLElement.offsetParent（offsetLeft和offsetTop参照offsetParent的内边距边界）
IE7以上(不是火狐): 父级没有定位: 本身没有定位: ==> offsetParent:body 本身定位为:absolute/relative: ==> offsetParent:b ...
一篇弄懂 offsetWidth、offsetHeight、offsetleft、offsetTop和offsetParent的区别！（1）
快速理解offset之间的区别 1.offsetWidth与offsetHeight 2.offsetParent 3.offsetleft.offsetTop 以下代码均在Chrome浏览器中测试 ...
offsetLeft、offsetTop全面解析
offsetLeft.offsetTop全面解析一.第一个小例子 <body> <style>body { margin:0; }.box1 { width:300px; h ...
【JavaScript】全面解析offsetLeft、offsetTop
前言:偏移量,很多动画效果的实现都是通过去改变偏移量的改变来实现的,但是你真的完全了解offsetLeft,offsetTop吗? 一.第一个小例子 <body> <style> ...
offsetleft和offsettop的使用
offsetLeft 是一个只读属性,返回当前元素相对于 offsetParent 节点左边界的偏移像素值. offsetLeft和offsetTop理解为当前元素距离父元素左上角的偏移值(偏移量 ...
getBoundingClientRect计算页面元素的offsetLeft、offsetTop
网上很流行的方法,不用框架时: function getOffsetPosition(element){ var posTop = 0, posLeft = 0; do { posTop += ele ...
clienttop,clientleft,scrolltop,scrollleft,offsettop,offsetleft全解析
一张图网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body. ...

offsetLeft和offsetTop怎么用

前言:

正文：

总结：

offsetLeft和offsetTop怎么用相关推荐

最新文章

热门文章