javascript学习之位置获取

http://www.ruanyifeng.com/blog/2009/09/find_element_s_position_using_javascript.html

http://www.cnblogs.com/bobodeboke/p/6935086.html

一、获取元素的大小和位置

方法一、利用offsetXXX属性

1）offsetHeight：元素垂直方向占用空间，包括内边距，上下边框。

2)offsetWidth:元素水平方向占用空间，包括内边距，左右边框。

3）offsetLeft:元素的左外边框至包含元素（offsetParent引用中）的左内边框之间的像素距离。

4）offsetTop:元素的上外边框至包含元素（offsetParent引用中）的上内边框之间的像素距离。

根据offsetLeft和offsetTop，向上回溯到根元素，可以得到元素在页面的偏移量：

//获取元素在页面的左偏移
function getElementLeft(element){
    var acturalLeft=element.offsetLeft;
    var current=element.offsetParent;
    while(current!=null){
        acturalLeft+=current.offsetLeft;
        current=current.offsetParent;        
    }
    return acturalLeft;
}
//获取元素在页面的上偏移
function getElementTop(element){
    var acturalTop=element.offsetTop;
    var current=element.offsetParent;
    while(current!=null){
        acturalTop+=current.offsetTop;
        current=current.offsetParent;
    }
    return acturalTop;

}

 

二、获取元素的客户区大小clientWidth,以及clientHeight;

元素客户区大小是指元素内容及其内边距所占据的空间大小，从字面上看，客户区大小就是元素内部空间的大小，因此不包含边框和滚动条。

clientWidth是元素内容区域宽度加上左右内边距宽度

clientHeight是元素内容区域高度加上上下内边距的宽度

常见的用法是获取浏览器窗口的大小：

 

var width=document.documentElement.clientWidth||document.body.clientWidth;
var height=document.documentElement.clientHeight||document.body.clientHeight;

 

 

 

方法二、利用getBoundingClientRect()方法

该方法返回一个矩形对象，包含left，top，right和bottom四个属性。这些属性给出了元素相对于视口的位置。

其中right和left的差值和offsetWidth的值相等，bottom和top差值和offsetHeight的值相等。left和top属性大致等于前面得getElementTop和getElementLeft

（IE认为文档左上角是（2,2），其他包括IE9则认为左上角为(0,0)）

三、滚动元素大小和位置的确定

1)scrollHeight:如果没有滚动条，元素的总高度(即将滚动折叠部门的高度也包括进去)

2）scrollWidth:如果没有滚动挑，元素的总宽度

3）scrollLeft：被滚动条隐藏在左侧区域的像素数目。通过设置这个属性可以改变元素的滚动位置

4）scrollTop：被滚动条隐藏在上侧区域的像素数目。通过设置这个属性可以改变元素的滚动位置

四、鼠标位置的获取

1)事件对象event的clientX与clientY属性：事件发生时候，鼠标指针在视口的水平和竖直坐标

2)事件对象event的pageX与pageY属性：事件发生时候，鼠标指针在页面的水平和竖直坐标，在页面没有滚动的时候，等于clientX和clientY

3)事件对象event的screenX与screenY属性：事件发生时候，鼠标指针相对于屏幕的水平和竖直坐标

4）IE提供了事件对象event的offsetX与offsetY属性：事件发生时候，鼠标相对于目标元素边界的水平和竖直坐标