JS学习笔记---17 PC端网页特效-1、元素偏移量 offset 系列

PC端 网页特效

1、元素偏移量 offset 系列

1.1、offset 概述

offset 翻译过来就是偏移量，我们是用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。

• 获得元素距离带有定位父元素的位置
• 获得元素自身的大小（宽度高度）
• 注意：返回的数值都不带单位

offset 系列常用属性：

offset 系列属性	作用
element.offsetParent	返回作为该元素带有定位的父级元素，如果父级都没有定位，则返回body
element.offsetTop	返回元素相对带有定位父元素上方的偏移
element.offsetLeft	返回元素相对带有定位父元素左边框的偏移
element.offsetWidth	返回自身包括padding、边框、内容区的宽度，返回数值不带单位
element.offsetHeight	返回自身包括padding、边框、内容区的高度，返回数值不带单位

1.2、offset 与 style 区别

1.2.1、案例：获取鼠标在盒子内的坐标

1.2.2、案例：拖动模态框

1.2.3、案例：仿京东放大镜