offsetLeft
获取的是忽略 margin 当前元素距离上一级父节点(有没有设置position,有的话依据父节点,没有的话依据页面最左端这时候不管滚动条移到哪) 当前元素向左的位置 记住它会将margin-left加入计算
offsetTop
获取的是忽略 margin 当前元素距离上一级父节点(有没有设置position,有的话依据父节点,没有的话依据页面最顶端端这时候不管滚动条移到哪) 当前元素向上的位置 记住它会将margin-top加入计算
offsetWidth
获取盒子的 宽度+边框+padding+margin的宽度
offsetHeight 同上
getBoundingClientRect 原生方法
它的width和height 获取情况和offsetWidth,offsetHeight相同。
top 获取的是当元素距离窗口的可视顶点的距离如果超过就为负
left获取的是当元素距离窗口的可视最左侧的距离如果超过就为负
clientWidth 指的是 当前元素的高度+padding的上下边距
clientHeight 指的是 当前元素的宽度+padding的左右边距
Jquery 的 offset()
left 获取当前元素距离距离document最左侧的距离 包括margin
top 获取当前元素距离距离document最顶点的距离是页面最顶端,到盒子边框>内边距>元素的距离这个距离包括 margin 但是不同于 getBoundingClientRect 的 top
$ele.width 获取当前元素的宽度 不包括 内边距外边框margin
$ele.height 获取当前元素的高度 不包括 内边距外边框margin
下面是兼容情况,有些版本的浏览器可能不兼容width/height