元素偏移量offset系列（获取该元素的偏移或大小）（包含拖拽模态框的案例）

本文链接：https://blog.youkuaiyun.com/weixin_48340600/article/details/108796139

本文介绍了offset系列属性，如offsetTop、offsetLeft等在网页布局中的应用，并通过实例展示了如何利用这些属性实现元素的拖拽功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

元素偏移量offset系列（获取该元素的偏移或大小）（都没有单位）

一、常用属性

1、offsetTop、offsetLeft 获取该元素的偏移

可以得到元素的偏移位置，它以带有定位的父亲为准如果没有父亲或者父亲没有定位，则以 body 为准，返回不带单位的数值

2、 offsetWidth、offsetHeight 获取该元素的大小

可以得到元素的大小宽度和高度是包含padding + border + width

3、offsetParent 返回带有定位的父亲否则返回的是body

二、offset和style的区别

style.weight只能获得或设置行内样式表的属性值；对其他样式表的属性值都获取不到，所以用offset获取大小更合适

例：拖拽模态框

（1）当我们鼠标在某处按下，就获得鼠标在盒子内的坐标（鼠标距离页面的距离-盒子距离页面的距离），进而求得模态框需要的top、left的值

添加事件的对象是，点击拖拽的那片区域；事件是mousedown

（2）得到模态框的top、left的值：鼠标移动的时候，把鼠标在页面中的坐标，减去鼠标在盒子内的坐标就是模态框的left和top值

此处需要在鼠标按下事件的内部写，添加事件的对象是document表示可以在任何地方拖动；

（3）再添加鼠标弹起的事件，清除赋值给盒子top和left的值的函数

title.addEventListener('mousedown', function (e) {
            var x = e.pageX - login.offsetLeft;
            var y = e.pageY - login.offsetTop;
            // (2) 鼠标移动的时候，把鼠标在页面中的坐标，减去 鼠标在盒子内的坐标就是模态框的left和top值
            document.addEventListener('mousemove', move)

            function move(e) {
                login.style.left = e.pageX - x + 'px';
                login.style.top = e.pageY - y + 'px';
            }
            // (3) 鼠标弹起，就让鼠标移动事件移除
            document.addEventListener('mouseup', function () {
                document.removeEventListener('mousemove', move);
            })
        })