码迷,mamicode.com
首页 > 其他好文 > 详细

盒子 offsetLeft、offsetTop、offsetWidth 等属性解释

时间:2015-07-29 15:30:16      阅读:137      评论:0      收藏:0      [点我收藏+]

标签:

 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

技术分享 

盒子 offsetLeft、offsetTop、offsetWidth 等属性解释

标签:

原文地址:http://www.cnblogs.com/Mrxiedh/p/4685798.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!