网页元素位置、鼠标事件位置信息小结
2015-11-22 16:37
411 查看
在web开发过程中,比较容易混淆和让人感到头等的一部分就是下面这张图了吧,一下子都记住对我来说很难,在日常的开发过程中,
总是遇到了再查,遇到一点记一点,相信日积月累,总会记住。今天遇到了其中的一部分,做一下小结。
1,获取浏览器窗口的宽和高(兼容性写法):
2,获取元素的宽和高:
3,获取元素距离浏览器左侧和上侧的距离
4,鼠标事件的位置信息
鼠标事件都是在浏览器窗口的特定位置上发生的,这个位置信息保存在事件的clientX和clientY属性中,所有浏览器都支持这两个属性,它们的值表示事件鼠标指针在
窗口中的水平和垂直坐标,不包括页面滚动的距离,即得到光标的坐标。这两个都是事件对象(event)的属性。
主要用于鼠标事件:onmousedown onmousemove onmouseup中
总是遇到了再查,遇到一点记一点,相信日积月累,总会记住。今天遇到了其中的一部分,做一下小结。
1,获取浏览器窗口的宽和高(兼容性写法):
var winW=document.documentElement.clientWidth||document.body.clientWidth; var winH=document.documentElement.clientHeight||document.body.clientHeight;
2,获取元素的宽和高:
var oWidth= oDrag.offsetWidth; //oDrag为获取的js对象,即要操作的元素 var oHeight=oDrag.offsetHeight;
3,获取元素距离浏览器左侧和上侧的距离
var oLeft=oDrag.offsetLeft; //oDrag为要操作的元素 var oTop=oDrag.offsetTop;
4,鼠标事件的位置信息
鼠标事件都是在浏览器窗口的特定位置上发生的,这个位置信息保存在事件的clientX和clientY属性中,所有浏览器都支持这两个属性,它们的值表示事件鼠标指针在
窗口中的水平和垂直坐标,不包括页面滚动的距离,即得到光标的坐标。这两个都是事件对象(event)的属性。
event.clientX event.clientY
主要用于鼠标事件:onmousedown onmousemove onmouseup中
相关文章推荐
- 如何使用富文本编辑器xheditor
- HDU1029-Ignatius and the Princess IV
- Android应用内语言切换实现
- 自定义控件SettingItemView
- zzulioj 1783: 简单的求和 (筛选求和) 求和预处理 好题
- SQLite使用事务更新—by command
- 《你的灯亮着吗?:发现问题的真正所在》读书笔记
- HTML表格边框的设置小技巧
- CALayer 为什么选择 cg 开头 而 不选择 UI 开头
- jsp页面、servlet显示中文乱码详解
- ETL浅谈
- Assets目录下的文件大小是否有限制?
- 【C++基础学习】成员对象与对象数组
- 杭电ACM1162(prim)
- Android的进程线程
- HDU1877-又一版 A+B
- 解析错误:解析软件包时出现问题
- QT5与之前版本间问题整理
- 大白-Dijksta模板
- 分层设计