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、getBoundingClientRect等属性解释的更多相关文章

  1. JavaScript--clientX,clientY、pageX,pageY、offsetLeft,offsetTop/offsetWidth,offsetHeight、scrollLeft,scrollTop/scrollWidth,scrollHeight、clientHeight,clientWidth区别

    /*在事件的内部console.dir(event)*/ /** * 事件对象event * clientX/clientY 获取鼠标基于浏览器窗口(可视区域的坐标位置)全兼容 * * pageX/p ...

  2. 一文看懂js中元素偏移量（offsetLeft,offsetTop,offsetWidth,offsetHeight）

    偏移量(offset dimension) 偏移量:包括元素在屏幕上占用的所有可见空间,元素的可见大小有其高度,宽度决定,包括所有内边距,滚动条和边框大小(注意,不包括外边距). 以下4个属性可以获取 ...

  3. offsetWidth, offsetHeight, offsetLeft, offsetTop,clientWidth, clientHeight,clientX,pageX,screenX

    offsetWidth: 元素在水平方向上占用的空间大小.包括元素的宽度,内边距,(可见的)垂直滚动条的宽度,左右边框的宽度. offsetHeight:元素在垂直方向上占用的空间大小,包括元素的高度 ...

  4. 深入理解定位父级offsetParent及偏移大小offsetTop / offsetLeft / offsetHeight / offsetWidth

    深入理解定位父级offsetParent及偏移大小 [转载] 前面的话 偏移量(offset dimension)是javascript中的一个重要的概念.涉及到偏移量的主要是offsetLeft.o ...

  5. js的offsetWidth,offsetHeight,offsetLeft,offsetTop

    js的offsetWidth,offsetHeight,offsetLeft,offsetTop

  6. JS实现图片无缝滚动特效；附addEventListener()方法、offsetLeft和offsetWidth属性。

    一:html部分 <body> <input id="btn1" type="button" value="向左"> ...

  7. offsetLeft, offsetTop以及postion().left , postion().top有神马区别

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之全然具体解释

      HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth究竟指的哪到哪的距离之全然具体解释scrollHeight: 获取对象的滚动高度. scrol ...

  9. 四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...

随机推荐

  1. db2学习笔记--数据类型对表的影响

    创建表的时为列选择合适的数据类型,可以提高数据库性能. 1.选择合适的数据类型,避免出现数据类型转换.例如日期,有人使用字符串来存放日期.时间戳,最后我们还要在程序中使用to_date做数据类型转换, ...

  2. android px转换为dip/dp

    /** * 根据手机的分辨率从 dp 的单位 转成为 px(像素) */ public int dipTopx(Context context, float dpValue) { final floa ...

  3. 【转】XenServer架构之XAPI

    一.XAPI对资源池的管理 作为XenServer的管理工具集,XAPI管理XenServer的主机,网络和存储.不管是OpenStack还是CloudStack,如果使用XenServer作为虚拟化 ...

  4. java设计模式之建造者模式

    学习了设计模式,一直感觉有进步又没有进步,与同学.同事探讨了一下.变化不可能一会就可以的,需要努力坚持.不管进步大小,也不管是否进步,做到勿忘初心,做自己喜欢的事情就好.还有几个设计模式一直没有写,原 ...

  5. mysql timeout知多少

    1.timeout变量知多少 打开mysql,用show variables like '%timeout%'命令一看,不看不知道,一看吓一跳,结果如下面所示,这么多timeout相关变量,一下就吓尿 ...

  6. 深度掌握SVG路径path的贝塞尔曲线指令

    一.数字.公式.函数.变量,哦,NO! 又又一次说起贝塞尔曲线(英语:Bézier curve,维基百科详尽中文释义戳这里),我最近在尝试实现复杂的矢量图形动画,发现对贝塞尔曲线的理解馒头那么厚,是完 ...

  7. Subsets

    Given a set of distinct integers, nums, return all possible subsets. Note: The solution set must not ...

  8. JavaScript模板引擎artTemplate.js——是否编码输出html字符

    template.config(name, value)方法用于更改引擎的默认配置. 其中字段escape,类型为boolean,默认为true. 首先,我们不修改配置信息输出一段带有html标签的字 ...

  9. 支持同步滚动的RichTextbox控件

    using System.Windows.Forms; public class SynchronizedScrollRichTextBox : System.Windows.Forms.RichTe ...

  10. ubuntu下的apt-get内网本地源的搭建

    APT本地源的搭建(可用于局域网apt-get源搭建或者本地源) 本文档介绍使用apt-mirror软件搭建apt本地源 需求:内网开发环境由于其特定原因不能上外网,所以需要本地环境下的内网源来方便开 ...