offsetParent、offsetTop、offsetLeft、offsetWidth、offsetHeight
w3c规范，请戳这里：http://www.w3.org/TR/cssom-view/#dom-htmlelement-offsetparent
一、offsetParent
英文解读：
part one：offsetParent作为一个元素属性并不是每一个元素都是值得拥有的，对于符合以下情况的元素是没有offsetParent这个属性的：
① 该元素没有css布局的盒子模型（我觉得这句话很难理解，有见识的人指教）；
② 该元素是根元素（关于这一点的理解在后续会解释，其实原因就是offsetParent是一个相对属性，就是要找个参照物）；
③ 该元素师html body元素；
④ 该元素的position属性为fixed；
part two: 对于offsetParent这个属性值又是怎么计算的呢？计算方法取决于该元素最近的祖先元素（注意不是单单父级元素喔）。应该按照以下条件逐个满足计算
① 相对祖先元素中position不是static的那个元素；
② 假如在根据条件①找不到的情况，则默认是<body>元素；
③ 虽然祖先元素的position是static，但是元素名字是td、th或者是table的，则可以等同于第①条
二、offsetTop
英文解读：
offsetLeft属性也不是每个元素都有的，其实更确切地讲应该是建立在offsetParent之上的,它要去找一个有offsetParent属性的祖先元素。
① 如果该元素是html body元素，或者是没有css布局，自然就没有offsetLeft的意义，offsetLeft的值会返回0并且终止该算法；
以下还有两点就是有关offsetLeft的计算问题：
① 对于所有祖先元素的offsetParent属性值为null的元素，该元素的offsetLeft的值是这么计算的：该值应该放在该元素的CSS布局模型下进行计算，为以上边框为边界相对于该元素初始包含块的位置，期间要忽略该元素和祖先元素的平移；
② 而存在祖先元素中存在具有offsetParent属性的元素，计算要依赖于最近的具有offsetParent属性的祖先元素，计算情况为：拥有offsetParent属性的祖先元素的padding-top，加上目标元素以上边框为边界相对于该元素初始包含块的位置（这就涉及到了margin-left），期间要忽略该元素和祖先元素的平移；
三、offsetLeft
英文解读：
参考offsetTop
四、offsetWidth
英文解读：
offsetWidth为具有css布局元素的属性。该值得计算为：元素的边框、水平的padding、元素本身的width。
五、offsetHeight
英文解读：
offsetHeight可以参考offsetWidth进行定义。
offsetWidth=(border-width)*2+(padding-left)+(width)+(padding-right)
offsetHeight=(border-width)*2+(padding-top)+(height)+(padding-bottom)
offsetLeft=(offsetParent的padding-left)+(中间元素的offsetWidth)+(当前元素的margin-left)
offsetTop=(offsetParent的padding-top)+(中间元素的offsetHeight)+(当前元素的margin-top)
最后：附上博友详细分析计算的好文一枚 http://www.cnblogs.com/jscode/archive/2012/09/03/2669299.html
offsetParent、offsetTop、offsetLeft、offsetWidth、offsetHeight的更多相关文章
- offsetleft、offsetTop、offsetParent的兼容性问题
先来看看offsetParent返回的是什么值 ele.offsetParent返回的是ele元素最近的并且是定位过(relative,absolute)的父元素,如果没有父元素或者是父元素中没有一个 ...
- 简单理解offsetleft、offsetTop、offsetParent
先来看看offsetParent返回的是什么值 ele.offsetParent返回的是ele元素最近的并且是定位过(relative,absolute)的父元素,如果没有父元素或者是父元素中没有一个 ...
- 理解clientX、clientY、offsetLeft、event.offsetTop、offsetWidth、offsetHeight、clientWidth、clientHeight、scrollTop、scrollHeight
一.clientX和clientY 事件发生时,鼠标距离浏览器的可视区域的X.Y轴的位置,不包含滚动条的区域的部分.就算是页面进行了滚动,鼠标的坐标值还是参考可视区域的. 二.offsetLeft和o ...
- offsetTop、offsetLeft、offsetWidth、offsetHeight的用法
假设 obj 为某个 HTML 控件. obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型,单位像素. obj.offsetLeft ...
- 盒子 offsetLeft、offsetTop、offsetWidth、getBoundingClientRect等属性解释
offsetLeft 获取的是忽略 margin 当前元素距离上一级父节点(有没有设置position,有的话依据父节点,没有的话依据页面最左端这时候不管滚动条移到哪) 当前元素向左的位置 记住它会将 ...
- offsetWidth、offsetleft 等图文详解
网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...
- 【JavaScript】全面解析offsetLeft、offsetTop
假设 obj 为某个 HTML 控件.obj.offsetLeft 指 obj 距离左方或上层控件的位置,整型,单位像素. obj.offsetRight 指 obj 距离右方或上层控件的位置,整型, ...
- javaScript动画1 offsetWidth、offsetLeft
offsetWidth和offsetHeight <!DOCTYPE html> <html lang="en"> <head> <met ...
- JS：body元素对象的clientWidth、offsetWidth、scrollWidth、clientLeft、offsetLeft、scrollLeft
document.body.clientWidth 获取body元素对象的内容可视区域的宽度,即clientWidth=width+padding,不包括滚动条. document.body.clie ...
随机推荐
- php去除换行(回车换行)的方法
php去除换行(回车换行)的三种方法. 代码: <?php //php 不同系统的换行 //不同系统之间换行的实现是不一样的 //linux 与unix中用 \n //MAC ...
- Php中正则小结(一)
一.概念 语法模式类似perl.表达式必须用分隔符闭合,比如一个正斜杠(/). 分隔符可以是任意非字母非数字,除反斜杠(\)和空字节之外的非空白ascii字符 如果分隔符 在表达式中使用,需要使用反斜 ...
- VS2012那点事儿
VS2012并不完美支持C99标准,这一点强烈的体现在如下的错误: 也就是是说你的变量定义必须在前面,一股脑儿全写完,然后才可以使用,如果你定义变量穿插在了其他地方,那么就会报上面的错误.略微有些遗憾 ...
- C#高级功能（四）扩展方法和索引
扩展方法使你能够向现有类型“添加”方法,而无需创建新的派生类型.重新编译或以其他方式修改原始类型. 扩展方法是一种特殊的静态方法,但可以像扩展类型上的实例方法一样进行调用.扩展方法被定义为静态方法,但 ...
- linux MTD系统解析（转）
MTD,Memory Technology Device即内存技术设备,在Linux内核中,引入MTD层为NOR FLASH和NAND FLASH设备提供统一接口.MTD将文件系统与底层FLASH存储 ...
- python爬虫-urllib模块
urllib 模块是一个高级的 web 交流库,其核心功能就是模仿web浏览器等客户端,去请求相应的资源,并返回一个类文件对象.urllib 支持各种 web 协议,例如:HTTP.FTP.Gophe ...
- i++与++i的误解
javap -c xx.class {i=0i=i++}0: bipush 02: istore_1 stack ->var13: iload_1 var1->stack4: iinc 1 ...
- MvvmCross for WPF 支持子窗体显示、关闭、传参
最近在做 PCL(Portable Class Library)平台的项目,所以发一下自己遇到的问题 MvvmCross 是 PCL 平台的一个 MVVM 框架 地址:https://github.c ...
- GROUPING SETS、CUBE、ROLLUP
其实还是写一个Demo 比较好 USE tempdb IF OBJECT_ID( 'dbo.T1' , 'U' )IS NOT NULL BEGIN DROP TABLE dbo.T1; END; G ...
- .Net码农学Android---小点整理
小点整理 虽然两大语言的编程思想相同,语法也相似,但具体到使用时,还是有些别扭,可能还是不太熟悉,现就自己遇到的一些微小问题整理如下: String/Int转换 C#:String--->Int ...