offset 用于获取元素的偏移量:
能够获取元素间隔带有定位的父元素的地位【留神条件须要有定位】，如果父元素没有定位，则会向上寻找直到找到带有定位的那个父级元素
offsetTop：获取到元素间隔带有定位的父元素的顶部的间隔
offsetLeft：获取到元素间隔带有定位的父元素的右边的间隔
能够获取元素自身的大小(获取到的值不带单位)， padding + width + border
offsetWidth：获取到元素的宽度
offsetHeight：获取到元素的高度
理解了 offsetTop 和 offsetLeft 之后咱们就能够做一个拖拽元素的小练习了，实现思路如下图：
代码如下：
<!DOCTYPE html><html lang="cn"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ padding: 0; margin: 0; } body{ position: relative; } .box{ width: 100px; height: 100px; background-color: red; position: absolute; } </style></head><body> <div class="box"></div> <script> let box = document.querySelector('.box') /** * 应该先获取到鼠标在盒子外面的地位 * 鼠标在盒子内的地位 = 鼠标在页面的地位 - 盒子间隔屏幕边的间隔 * 盒子间隔屏幕边的间隔 = 鼠标在页面的地位 - 鼠标在元素内的地位 */ //鼠标按下 box.addEventListener('mousedown',function(e){ let mouseX = e.pageX - box.offsetLeft let mouseY = e.pageY - box.offsetTop //鼠标挪动工夫办法，这个办法肯定要抽离进去，这样能力通过 removeEventListener 将监听事件移除 var move = function(e){ let left = e.pageX - mouseX let top = e.pageY - mouseY //实现拖拽 box.style.left = left + 'px' box.style.top = top + 'px' //鼠标抬起 box.addEventListener('mouseup',function(e){ //移除鼠标挪动监听，完结追随2 box.removeEventListener('mousemove', move) }) } box.addEventListener('mousemove', move) }) </script> </body></html>