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. shell 中的与、或表达式

    今天总结一下linux shell中逻辑关机表达方式.逻辑与的表达: 1).if [ $xxx=a -a $xx=b ] 注:-a表示and的意思 2).if [ $xxx=a ] && ...

  2. 在Windows中玩转Docker Toolbox

    最近在研究虚拟化,容器和大数据,所以从Docker入手,下面介绍一下在Windows下怎么玩转Docker. Docker本身在Windows下有两个软件,一个就是Docker,另一个是Docker ...

  3. 【原】让H5页面适配移动设备全家 - 前端篇 - PPT

    7月份在部门内给设计中心的同事们带来<让H5页面适配移动设备全家 - 设计师篇 - PPT>的分享,在视觉和交互稿上提出页面适配的建议及提升页面体验的好处,促进前端和设计双方更好的合作,同 ...

  4. PAT 1045. 快速排序(25)

    著名的快速排序算法里有一个经典的划分过程:我们通常采用某种方法取一个元素作为主元,通过交换,把比主元小的元素放到它的左边,比主元大的元素放到它的右边. 给定划分后的N个互不相同的正整数的排列,请问有多 ...

  5. Markdown的使用－－－现学现用

    Markdown 是一种轻量级的标记语言,它的的优点很多,在这就不重复说了,最吸引人的应该是它清新简洁的界面,并且语法简单易学.最为常用的语法不会很多,用多了便自然而然的记住了. 可选工具 网上说如果 ...

  6. 新手学跨域之iframe

    https://segmentfault.com/a/1190000000702539 页面嵌套iframe是比较常见的,比如QQ相关业务页面的登录框一般都是iframe的.使用ifrmae跨域要满足 ...

  7. mac机上搭建php56/nginx 1.8.x/thinkphp 3.2.x/gearman扩展/seaslog扩展/redis扩展环境

    php的各种扩展配置起来实在不容易,记录一下备忘: 一.php56 安装 虽然php7出来了,但是没用过,不知道有没有坑,这里仍然使用php5.6版本 1.1 安装php/php-pfm brew u ...

  8. [网站公告]数据库服务器IOPS跑满造成网站不能正常访问

    今年下午13:20-14:20左右,突增的访问量引发数据库服务器(阿里云RDS)IOPS跑满,造成大量请求执行缓慢,从而严重影响了网站的正常访问,给大家带来很大的麻烦,望大家谅解! 在出现故障时,当我 ...

  9. C#实现Levenshtein distance最小编辑距离算法

    Levenshtein distance,中文名为最小编辑距离,其目的是找出两个字符串之间需要改动多少个字符后变成一致.该算法使用了动态规划的算法策略,该问题具备最优子结构,最小编辑距离包含子最小编辑 ...

  10. CoreOS和Docker入门

    转载自: http://www.oschina.net/translate/coreos_and_docker_first_steps?cmp CoreOS是一个基于Linux,systemd和Doc ...