节点定位就是获取一个元素所在的位置。
jQuery中和节点定位有关的函数为:
$.prototype.offset
$.prototype.position
在DOM编程中,W3C已规定一系列用来定位节点的成员:
offsetLeft offsetTop scrollTop scrollLeft getBoundingRect getClientRects
不过这些属性被浏览器搞得无法直接用。
节点定位看似简单,实现含很多的技巧。在 jQuery 中,专门定义一个类用来管理定位(内部使用)。
说到位置,大家肯能想到就是元素的(x, y) 。然后事情不那么简单:
假设左上角为(0, 0) 位置, 那一个元素的位置是它的 绝对位置 。
但如果页面可以滚动,在滚下之后,它的位置如何表示? 这里我把这个位置叫节点的 当前位置。在 CSS 中, 使用 left top 能更改节点位置,但这个位置不是绝对坐标的点,而是相对父节点的位置。我们把这个位置称 偏移位置。
见图
在 jQuery中, position 返回 偏移位置。 offset 返回当前位置。
下面一个个解决,如何获取这些位置。
1. 滚动位置。(滚动条翻转的大小)
全浏览器都一样:
elem.srcollTop
2. 当前位置。
使用 getBoundingRect 获取,但老浏览器需要手动计算这个值。
3. 绝对位置。
在当前位置加上滚动位置,即绝对位置。
4. 偏移位置。
当前节点的绝对位置减偏移节点的绝对位置。
(具体实现可见 jQuery 源码)
jQuery中和节点定位有关的函数为:
$.prototype.offset
$.prototype.position
在DOM编程中,W3C已规定一系列用来定位节点的成员:
offsetLeft offsetTop scrollTop scrollLeft getBoundingRect getClientRects
不过这些属性被浏览器搞得无法直接用。
节点定位看似简单,实现含很多的技巧。在 jQuery 中,专门定义一个类用来管理定位(内部使用)。
说到位置,大家肯能想到就是元素的(x, y) 。然后事情不那么简单:
假设左上角为(0, 0) 位置, 那一个元素的位置是它的 绝对位置 。
但如果页面可以滚动,在滚下之后,它的位置如何表示? 这里我把这个位置叫节点的 当前位置。在 CSS 中, 使用 left top 能更改节点位置,但这个位置不是绝对坐标的点,而是相对父节点的位置。我们把这个位置称 偏移位置。
见图
在 jQuery中, position 返回 偏移位置。 offset 返回当前位置。
下面一个个解决,如何获取这些位置。
1. 滚动位置。(滚动条翻转的大小)
全浏览器都一样:
elem.srcollTop
2. 当前位置。
使用 getBoundingRect 获取,但老浏览器需要手动计算这个值。
3. 绝对位置。
在当前位置加上滚动位置,即绝对位置。
4. 偏移位置。
当前节点的绝对位置减偏移节点的绝对位置。
(具体实现可见 jQuery 源码)