获取元素在页面中的位置:
绝对定位:到body的距离
相对定位:到视口的距离
绝对定位可以用以下封装的函数进行取值:
function getPointAb(node){
var x = 0;
var y = 0;
while(node){
x += node.offsetLeft;
y += node.offsetTop;
node = node.offsetParent;
}
return {x:x;y:y};
}
鼠标滚轮滚动的距离取值:
滚动条滚动时,实际上是元素滚动的距离
var L = document.documentElement.scrollLeft||document.body.scrollLeft;
var T = document.documentElement.scrollTop||document.body.scrollTop;
根据以上两个,可以得出,相对定位的封装函数:
function getPointRe(node){
var x = 0;
var y = 0;
while(node){
x += node.offsetLeft;
y += node.offsetTop;
node = node.offsetParent;
}
var L = document.documentElement.scrollLeft||document.body.scrollLeft;
var T = document.documentElement.scrollTop||document.body.scrollTop;
return {x:x-L;y:y-T};
}
注意:以上这些方法均是在border、margin为0时适用。
不过以上方法太复杂了,现在用getBoundingClientRect()来代替。getBoundingClientRect()方法返回元素的大小及其相对于视口的位置,也就是相对位置。
getBoundingClientRect()方法返回的left和right是元素左上角的相对位置; right和bottom返回的是右下角的相对位置;Height和width代表的是border-box的尺寸
左上角的相对位置和右下角的相对位置都知道了,就可以取到右上和左下角的相对位置,并且无论margin,border都会算进去的。就不用考虑那么多。那么
绝对位置,就是相对位置+滚动条滚动的距离 = 绝对位置
一般好用的东西兼容性都不好,但是这个API是比较特殊的,它的兼容性是非常好的,可以放心大胆的去用。