1. offsetWidth / offsetHeight(不包括外边距)

offsetWidth:返回元素的宽度(content+padding+border)
offsetHeight:返回元素的高度(content+padding+border)

2. offsetTop / offsetLeft(相对于父级的偏移量)

类似于子绝父相定位中的top和left,都是相对于有定位父级的偏移距离。
offsetTop:返回元素上边框到有定位父级元素的上边框的距离。(如果找不到有定位的父级,那么距离就是它的上边框到body的距离。)
offsetLeft:返回元素左边框到有定位父级元素的左边框的距离。(如果找不到有定位的父级,那么距离就是它的左边框到body的距离。)

下图演示的的是没有定位父级的情况:(如果外层盒子给一个定位,那么这里的offsetTop/offsetLeft都是0px)

3. clientWidth / clientHeight(不包括边框和外边距)

client客户端大小:当前元素内容和内边距占据空间的大小,不包括边框。
clientWidth:返回元素的宽度(content+padding)
clientHeight:返回元素的高度(content+padding)

4.getBoundingClientRect()分析

getBoundingClientRect()获取元素位置,这个方法没有参数

getBoundingClientRect()用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置。
getBoundingClientRect()是DOM元素到浏览器可视范围的距离(不包含文档卷起的部分)。

offsetWidth / offsetHeight等相关推荐

  1. ie6 offsetWidth/offsetHeight无效

    ie6 offsetWidth/offsetHeight无效 可采用手动获取: offsetWidth=parseInt(node.style.width)+parseInt(node.style.p ...

  2. 对于offsetWidth,offsetHeight,offsetLeft,offsetTop的理解

    如何理解区分offsetWidth,offsetHeight,offsetLeft,offsetTop 在刚开始使用的时候总是不能理解这四个有什么不一样,用在哪里,因为这几个词真的太像了,emmm,总 ...

  3. getBoundingClientRect offsetWidth offsetHeight

    对于一个旋转的dom元素,getBoundingClientRect()得到的width,height是外接矩形的宽高, offsetWidth offsetHeight是未旋转前dom的宽高

  4. 看图理解scrollTop,scrollLeft,clientWidth,clientHeight,offsetWidth,offsetHeight

    每次用JS获取页面的高宽时总都是相当的揪心,同一个属性在不同的浏览器或不同的W3C标准下所表示的意思都不尽相同.以下就针对页面的实际高宽和可见区域做个总结,以便大家查阅! 1. 在W3C标准的情况下 ...

  5. offsetwidth/offsetheight的区别

    1. 2. clientWidth是对象看到的宽度(不含边线,即border) scrollWidth是对象实际内容的宽度(若无padding,那就是边框之间距离,如有padding,就是左paddi ...

  6. 一文看懂js中元素偏移量(offsetLeft,offsetTop,offsetWidth,offsetHeight)

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

  7. offsetHeight、offsetWidth

    offsetHeight.offsetWidth offsetHeight网页可见区域高度 ,offsetWidth网页可见区域宽度 这两个属性是元素本身的,而不是style属性里面的,可以通过dom ...

  8. JS中的offsetWidth、offsetHeight、clientWidth、clientHeight等等的详细介绍

    javascript中offsetWidth.clientWidth.width.scrollWidth.clientX.screenX.offsetX.pageX 原文:https://www.cn ...

  9. JS中的offsetWidth, clientWidth, scrollWidth, innerWidth, outerWidth, pageXOffset

    value description offsetWidth 返回元素的宽度(包括元素宽度.内边距和边框,不包括外边距) offsetHeight 返回元素的高度(包括元素高度.内边距和边框,不包括外边 ...

最新文章

  1. 多摄像头实时目标跟踪和计数,使用YOLOv4,Deep SORT和Flask
  2. MPB:扬州大学王梦芝组-反刍动物瘤胃原虫18S rRNA测序分析技术
  3. javascript中while循环、do....while与for循环的用法和区别
  4. 9.STM32中对SysTick_Init()函数(sysTick_Config()、TimingDelay_Decrement()自定义)和Delay_us()的理解
  5. html5赛车小游戏,html5公路赛车小游戏
  6. 为什么ajax请求进不来后端路由_为什么要前后端分离?前后端分离的优点是什么?...
  7. php获取虚拟机ip,php如何获取用户的ip地址
  8. Asp.net源码上周更新目录(5.12-5.18)
  9. Python科学计算pdf
  10. 斐讯 K3刷梅林改固件ac-3100 成功配置定时任务
  11. 死灰复燃的ThinkPad SL400 同机型与同问题可参考!也可帮忙排错!
  12. 财务分析中三张财务报表计算公式
  13. js中undefined怎么判断
  14. C# .net+DevExpress自定义控件(UserControl)之分页控件
  15. 部署开源项目,修改Mysql数据库配置yaml文件
  16. 【java算法】排序算法大合集
  17. Compensating-Transaction模式
  18. B站台湾大学郭彦甫|MATLAB 学习笔记|13 统计 Statistics__Data_Analysis
  19. shelljs库使用js达到linux命令操作
  20. 多线程--何时用到多线程

热门文章

  1. IPv6技术精要--第3章 对比IPv4和IPv6
  2. python字典keys函数_Python字典中几个常用函数总结
  3. Python将Excel文件内容写入Word文件
  4. 重磅回归丨2020云和恩墨大讲堂,线上线下同步开讲!
  5. [转载]二十四节气养生大全
  6. 所谓的“警惕谷歌盗取中国文化资源”
  7. 卡尔曼滤波器2——数据融合(笔记篇 + 代码实现)
  8. LODOP打印机使用
  9. 【docker】拉取一个基础镜像然后制作自己的镜像并复用
  10. 浅析transient关键字