|
|
51CTO旗下网站
|
|
移动端

jQuery提供的获取元素位置的接口方法

getBoundingClientRect最早是IE中实现的,后主流浏览器都实现了它。因此后面的else判断基本上用不上,jQuery可考虑去掉该段代码。

作者:snandy来源:snandy的博客|2012-04-23 13:22

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()

它们之间的关系如下

从图中可以看到两个重要的函数.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. 1 // set position first, in-case top/left are set even on static elem  
  2. 2 if ( position === "static" ) {  
  3. 3     elem.style.position = "relative";  
  4. 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

原文链接:http://www.cnblogs.com/snandy/archive/2012/04/23/2455787.html

【编辑推荐】

  1. Visual Studio下使用jQuery的10个技巧
  2. 分解jQuery对相关控件的事件操作
  3. WCF初试,用JQuery实现loading的功能
  4. 浅析jQuery页面渐显效果的实现
  5. jQuery中10个强大的遍历函数
【责任编辑:张伟 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

网络工程师必读——网络工程基础

本书是一本知识全面、系统、专业的网络工程基础知识必备图书。全书条理清晰、逻辑性强,遵循从全局到细节,从底层基础到高层应用的顺序全面...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊