距及一样潮源码阅读近平年了,这时既更新至了1.7.2。

HTML元素的位置相关的css属性有top、left、bottom、right。要活采用这些性,需要了解css的一贯模型position:健康文档流,对立稳定,切定位。

刺探了这些css知识才再度清楚jQuery的position及offset的别。

 

jQuery中提供了取得设置HTML元素位置的接口方法。如下

  • .offset()
  • .position()
  • .offsetParent()
  • .scrollTop()
  • .scrollLeft()

 

所有职位相关的代码在列之offset.js中,总共250行代码。里面还起来未明之法门,如

  • getOffset()
  • getWindow()
  • jQuery.offset.bodyOffset()
  • jQuery.offset.setOffset()

 

其中的涉及如下

图片 1

 

从今图备受好看看零星只基本点之函数.offset()和.position()都依靠让个人的getOffset()。

.position()还靠于.offsetParent(),offsetParent通过while循环获取最近之一定父元素(position为非static值)。

getOffset()函数根据浏览器是否支持getBoundingClientRect得来。如果支持则以getBoundingClientRect,否则用while循环不断计算得出位置值。

getBoundingClientRect最早是IE中实现之,后主流浏览器还实现了其。因此后面的else判断基本上用无齐,jQuery可考虑去丢该段代码。

 

需留意下.offset()和.position()的分别

  • .offset() 相对于document(视口)计算的
  • .position() 相对于那个多年来之 定号父元素

 

除此以外,.offset()传入一个对象或函数时得以设置元素的位置(setter),而.position()则只是赢得位置(getter)。

 

.offset()作为getter时,获取dispaly:none的素top,left都将凡心碎。

.offset()作为setter时,如果无元素的position(此时值为static),那么.offset()方法会将那个设置为“relative”以相对于视口进行双重定位。如下

1 // set position first, in-case top/left are set even on static elem
2 if ( position === "static" ) {
3     elem.style.position = "relative";
4 }

 

相关:

  • http://www.w3.org/TR/cssom-view/#the-getclientrects
  • https://developer.mozilla.org/en/DOM/element.getBoundingClientRect
  • http://msdn.microsoft.com/en-us/library/ms536433%28VS.85%29.aspx

相关文章

网站地图xml地图