一、获取浏览器的大小和位置
具体可以参见博客:http://www.cnblogs.com/bobodeboke/p/4653920.html
二、获取元素的大小和位置
方法一、利用offsetXXX属性
1)offsetHeight:元素垂直方向占用空间,包括内边距,上下边框。
2)offsetWidth:元素水平方向占用空间,包括内边距,左右边框。
备注:如果不想包括边框部门,可以采用clientWidth,以及clientHeight;
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; }
方法二、利用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属性:事件发生时候,鼠标相对于目标元素边界的水平和竖直坐标