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

时间: 2024-08-08 12:03:35

offsetParent、offsetTop、offsetLeft、offsetWidth、offsetHeight的相关文章

0186 元素偏移量 offset 系列:offsetTop,offsetLeft,offsetWidth,offsetHeight,offset 与 style 区别,

1.1.1 offset 概述 offset 翻译过来就是偏移量, 我们使用 offset系列相关属性可以动态的得到该元素的位置(偏移).大小等. 获得元素距离带有定位父元素的位置 获得元素自身的大小(宽度高度) 注意:返回的数值都不带单位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpor

offsetTop、offsetLeft、offsetWidth、offsetHeight 【赞】

假设 obj 为某个 HTML 控件. offsetTop.offsetLeft obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型,单位像素.具体算法请参见 offsetTop.offsetLeft 算法. obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置,整型,单位像素. offsetWidth.offsetHeight obj.offsetWidth 指 o

offsetleft、offsetTop、offsetParent的兼容性问题

先来看看offsetParent返回的是什么值 ele.offsetParent返回的是ele元素最近的并且是定位过(relative,absolute)的父元素,如果没有父元素或者是父元素中没有一个是定位过的,返回值就是body元素 ele.offsetLeft和ele.offsetTop取值问题,分多种情况: 如果ele是body的直接子元素,返回值则是ele距离body左侧或顶部的距离 如果ele不是body的直接子元素,在父元素进行定位(relative,absolute)的情况下,各浏

理解clientX、clientY、offsetLeft、event.offsetTop、offsetWidth、offsetHeight、clientWidth、clientHeight、scrollTop、scrollHeight

一.clientX和clientY 事件发生时,鼠标距离浏览器的可视区域的X.Y轴的位置,不包含滚动条的区域的部分.就算是页面进行了滚动,鼠标的坐标值还是参考可视区域的. 二.offsetLeft和offsetTop 事件源元素相对于父节点的偏移的像素值. 三.offsetWidth和offsetHeight 获取的是元素的宽度,包含border,padding,内容宽度,以及滚动条的宽度,和element.getBoundingClientRect()的值是一致的. 四.clientWidth

offsetTop、offsetLeft、offsetWidth、offsetHeight的用法

假设 obj 为某个 HTML 控件. obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型,单位像素. obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置,整型,单位像素. obj.offsetWidth 指 obj 控件自身的绝对宽度,不包括因 overflow 而未显示的部分,也就是其实际占据的宽度,整型,单位像素. obj.offsetHeight 指 obj

盒子 offsetLeft、offsetTop、offsetWidth 等属性解释

offsetLeft 获取的是忽略 margin 当前元素距离上一级父节点(有没有设置position,有的话依据父节点,没有的话依据页面最左端这时候不管滚动条移到哪) 当前元素向左的位置 记住它会将margin-left加入计算 offsetTop 获取的是忽略 margin 当前元素距离上一级父节点(有没有设置position,有的话依据父节点,没有的话依据页面最顶端端这时候不管滚动条移到哪) 当前元素向上的位置 记住它会将margin-top加入计算 offsetWidth 获取盒子的 宽

JS:body元素对象的clientWidth、offsetWidth、scrollWidth、clientLeft、offsetLeft、scrollLeft

document.body.clientWidth 获取body元素对象的内容可视区域的宽度,即clientWidth=width+padding,不包括滚动条. document.body.clientHeight 获取body元素对象的内容可视区域的高度,即clientHeight=height+padding,不包括滚动条. 浏览器兼容性 在IE7中,如果给body设置滚动条的话,滚动条是出现在body内部的.所以当给body设置width和height时,在IE7中clientWidth

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

一:html部分 <body> <input id="btn1" type="button" value="向左"> <input id="btn2" type="button" value="向右"> <div id="div1">/*外框,显示区域*/ <ul id="ul1">/*循

html中offsetTop、clientTop、scrollTop、offsetTop各属性介绍

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft: