offsetWidth / offsetHeight等
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等相关推荐
- ie6 offsetWidth/offsetHeight无效
ie6 offsetWidth/offsetHeight无效 可采用手动获取: offsetWidth=parseInt(node.style.width)+parseInt(node.style.p ...
- 对于offsetWidth,offsetHeight,offsetLeft,offsetTop的理解
如何理解区分offsetWidth,offsetHeight,offsetLeft,offsetTop 在刚开始使用的时候总是不能理解这四个有什么不一样,用在哪里,因为这几个词真的太像了,emmm,总 ...
- getBoundingClientRect offsetWidth offsetHeight
对于一个旋转的dom元素,getBoundingClientRect()得到的width,height是外接矩形的宽高, offsetWidth offsetHeight是未旋转前dom的宽高
- 看图理解scrollTop,scrollLeft,clientWidth,clientHeight,offsetWidth,offsetHeight
每次用JS获取页面的高宽时总都是相当的揪心,同一个属性在不同的浏览器或不同的W3C标准下所表示的意思都不尽相同.以下就针对页面的实际高宽和可见区域做个总结,以便大家查阅! 1. 在W3C标准的情况下 ...
- offsetwidth/offsetheight的区别
1. 2. clientWidth是对象看到的宽度(不含边线,即border) scrollWidth是对象实际内容的宽度(若无padding,那就是边框之间距离,如有padding,就是左paddi ...
- 一文看懂js中元素偏移量(offsetLeft,offsetTop,offsetWidth,offsetHeight)
偏移量(offset dimension) 偏移量:包括元素在屏幕上占用的所有可见空间,元素的可见大小由其高度,宽度决定,包括所有内边距,滚动条和边框大小(注意,不包括外边距). 以下4个属性可以获取 ...
- offsetHeight、offsetWidth
offsetHeight.offsetWidth offsetHeight网页可见区域高度 ,offsetWidth网页可见区域宽度 这两个属性是元素本身的,而不是style属性里面的,可以通过dom ...
- JS中的offsetWidth、offsetHeight、clientWidth、clientHeight等等的详细介绍
javascript中offsetWidth.clientWidth.width.scrollWidth.clientX.screenX.offsetX.pageX 原文:https://www.cn ...
- JS中的offsetWidth, clientWidth, scrollWidth, innerWidth, outerWidth, pageXOffset
value description offsetWidth 返回元素的宽度(包括元素宽度.内边距和边框,不包括外边距) offsetHeight 返回元素的高度(包括元素高度.内边距和边框,不包括外边 ...
最新文章
- 多摄像头实时目标跟踪和计数,使用YOLOv4,Deep SORT和Flask
- MPB:扬州大学王梦芝组-反刍动物瘤胃原虫18S rRNA测序分析技术
- javascript中while循环、do....while与for循环的用法和区别
- 9.STM32中对SysTick_Init()函数(sysTick_Config()、TimingDelay_Decrement()自定义)和Delay_us()的理解
- html5赛车小游戏,html5公路赛车小游戏
- 为什么ajax请求进不来后端路由_为什么要前后端分离?前后端分离的优点是什么?...
- php获取虚拟机ip,php如何获取用户的ip地址
- Asp.net源码上周更新目录(5.12-5.18)
- Python科学计算pdf
- 斐讯 K3刷梅林改固件ac-3100 成功配置定时任务
- 死灰复燃的ThinkPad SL400 同机型与同问题可参考!也可帮忙排错!
- 财务分析中三张财务报表计算公式
- js中undefined怎么判断
- C# .net+DevExpress自定义控件(UserControl)之分页控件
- 部署开源项目,修改Mysql数据库配置yaml文件
- 【java算法】排序算法大合集
- Compensating-Transaction模式
- B站台湾大学郭彦甫|MATLAB 学习笔记|13 统计 Statistics__Data_Analysis
- shelljs库使用js达到linux命令操作
- 多线程--何时用到多线程