javascript学习之位置获取
2015-07-20 09:09
816 查看
一、获取浏览器的大小和位置
具体可以参见博客:http://www.cnblogs.com/bobodeboke/p/4653920.html
二、获取元素的大小和位置
方法一、利用offsetXXX属性
1)offsetHeight:元素垂直方向占用空间,包括内边距,上下边框。
2)offsetWidth:元素水平方向占用空间,包括内边距,左右边框。
备注:如果不想包括边框部门,可以采用clientWidth,以及clientHeight;
3)offsetLeft:元素的左外边框至包含元素(offsetParent引用中)的左内边框之间的像素距离。
4)offsetTop:元素的上外边框至包含元素(offsetParent引用中)的上内边框之间的像素距离。
根据offsetLeft和offsetTop,向上回溯到根元素,可以得到元素在页面的偏移量:
方法二、利用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属性:事件发生时候,鼠标相对于目标元素边界的水平和竖直坐标
具体可以参见博客: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属性:事件发生时候,鼠标相对于目标元素边界的水平和竖直坐标
相关文章推荐
- JSF的常用注解
- BZOJ 1028 [JSOI2007]麻将
- JS 几个日期函数
- extjs3学习笔记
- Javascript J更深层次的理解avascript 基础知识
- BZOJ 1027 [JSOI2007]合金
- Javascript 多浏览器兼容性问题及解决方案
- javascript单例模式的理解
- 请给出异步加载js方案
- JS DOM编程艺术——CSS-DOM—— JS学习笔记2015-7-19(第87天)
- JavaScript 三种创建对象的方法
- js 字符串获取对应的值
- js字符串对比的空格问题
- JSON格式使用方法
- [置顶] javascript正则表达式学习笔记之------正则表达式的创建和基本使用
- JavaScript权威指南_129_第15章_脚本化文档_15.6-创建、 插入、删除节点-插入节点
- js正则表达式实例(汇总)
- JavaScript权威指南_128_第15章_脚本化文档_15.6-创建、 插入、删除节点-创建节点
- JSON工具类
- JavaScript第一阶段总结