`
ywg2008
  • 浏览: 45353 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

关于javascript中获取坐标的参数

阅读更多
 
  1. //获取坐标位置  
  2. function getpos(e) {  
  3.     var t=e.offsetTop;  
  4.     var l=e.offsetLeft;  
  5.     var height=e.offsetHeight;  
  6.     while(e=e.offsetParent) {  
  7.         t+=e.offsetTop;  
  8.         l+=e.offsetLeft;  
  9.     }  
  10. }  

假设 obj 为某个 HTML 控件。
obj.offsetTop 指 obj 距离上方或上层控件的位置,整型,单位像素。
obj.offsetLeft 指 obj 距离左方或上层控件的位置,整型,单位像素。
obj.offsetWidth 指 obj 控件自身的宽度,整型,单位像素。
obj.offsetHeight 指 obj 控件自身的高度,整型,单位像素。

我们对前面提到的“上方或上层”与“左方或上层”控件作个说明。

例如:
 
  1. <div id="tool">  
  2.     <input type="button" value="提交">  
  3.     <input type="button" value="重置">  
  4. </div>  

“提交”按钮的 offsetTop 指“提交”按钮距“tool”层上边框的距离,因为距其上边最近的是 “tool” 层的上边框。
“重置”按钮的 offsetTop 指“重置”按钮距“tool”层上边框的距离,因为距其上边最近的是 “tool” 层的上边框。

“提交”按钮的 offsetLeft 指“提交”按钮距“tool”层左边框的距离,因为距其左边最近的是 “tool” 层的左边框。
“重置”按钮的 offsetLeft 指“重置”按钮距“提交”按钮右边框的距离,因为距其左边最近的是“提交”按钮的右边框。


offsetTop 可以获得 HTML 元素距离上方或外层元素的位置,style.top 也是可以的,二者的区别是:

一、offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px。
二、offsetTop 只读,而 style.top 可读写。
三、如果没有给 HTML 元素指定过 top 样式,则 style.top 返回的是空字符串。

offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样道理。



scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

以上主要指IE之中,FireFox差异如下:
IE6.0、FF1.06+:
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5:
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
分享到:
评论

相关推荐

    javascript中获取坐标的参数

    javascript中获取坐标的参数javascript中获取坐标的参数javascript中获取坐标的参数javascript中获取坐标的参数

    程序天下:JavaScript实例自学手册

    14.13 获取JavaScript函数中的所有参数 14.14 奇偶数的判断 14.15 在JavaScript运行VBScript函数 14.16 购物篮中常用的计算总价效果 14.17 同一用户的来访统计 14.18 十六进制转换为十进制 14.19 将URL转化为16进制 ...

    《程序天下:JavaScript实例自学手册》光盘源码

    14.13 获取JavaScript函数中的所有参数 14.14 奇偶数的判断 14.15 在JavaScript运行VBScript函数 14.16 购物篮中常用的计算总价效果 14.17 同一用户的来访统计 14.18 十六进制转换为十进制 14.19 将URL转化为16进制 ...

    Javascript获取窗口(容器)的大小及位置参数列举及简要说明

    Javascript获取窗口(容器)的大小及位置一系列的东西比较多,容易混淆,在这里列举及简要说明下: 属性方法说明: clientX 相对文档的水平坐标; clientY 相对文档的垂直坐标; offsetX 相对容器的水平坐标; offsetY ...

    艾恩JavaScript插件

    艾恩JavaScript插件 --力推3大功能:拖动,ajax... _.abs(id) 获取指定id标签的绝对坐标,返回{x:value,y:value}; _.trim(str) 去除str两侧的空格,类似于ASP中的Trim 。。。。。。 注:来自网络,非常好用。

    javascript常用对象梳理

    熟练掌握window对象的status、location、name、self、opener属性的使用 Window对象是客户端javascript最高层对象之一,只要打开浏览器窗口,不管该窗口中是否有打开的网页,当遇到BODY、FRAMESET或FRAME元素时,...

    JavaScript 图片切割效果

    依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值来剪切。 例如: div { position:absolute; width:60px; height:60px; clip:rect(0 20 50 10); } 注意position:absolute的设置是必须的(详细...

    javascript实现拖放效果

    拖动原理:其实就是在拖动块上监听mousedown事件,鼠标点击时,通过事件对象获取对应的坐标参数。然后鼠标移动时再监听document上的mousemove事件,获取鼠标的clientX 和clientY坐标然后设置拖动块的left 和 top。 ...

    JavaScript Table行定位效果

    并在GetBgColor获取背景色程序中使用: while (bgc == this._transparent && (node = node.parentNode) != document) { bgc = CurrentStyle(node).backgroundColor; } return bgc == this._transparent ? "#fff" :...

    javascriptbyexample:Javascript范例

    返回可变数量的参数函数:递归函数事件处理鼠标事件关键事件更改标签值变更班级更改输入元素鼠标X / Y坐标通过标签名称获取元素元素样式操纵URL 编辑子节点设定属性添加元素面向对象JavaScript 表格验证异常处理正则...

    php网络开发完全手册

    4.3 关于引用的解释 67 4.3.1 对变量的引用 67 4.3.2 对函数的引用 68 4.3.3 引用的释放 68 4.4 小结 69 第5章 PHP中类的应用 70 5.1 PHP中OOP的应用 70 5.1.1 类简介 70 5.1.2 类的信息封装 71 5.1.3 静态类 71 5.2...

    locup:简单的Node.js地理编码-使用它来获取地址的坐标并获取地址的坐标

    用它来获取地址的坐标并获取地址的坐标。 目前,locup使用Google的地理编码API,但已经准备好扩展到多个提供商。入门使用以下命令安装模块: npm install locup 提供API凭证作为环境变量api_key var Locup = new ...

    车辆跟踪:使用C#,ASP.net,Javascript等进行车辆跟踪的完整项目

    车辆跟踪系统使用GPS模块以固定的时间间隔获取地理坐标。 在本文中,我们提出了一种混合和新颖的系统,该系统同时提供车辆的位置和道路交通流量。 使用GPS套件,我们将检测诸如速度,纬度,经度,车辆路径等参数。...

    image-perspective-crop:具有透视图调整功能的简单JavaScript图像裁剪

    该代码实际上并没有进行裁剪,而是允许用户自由设置图像的四个角并获取四个调整点的坐标。 你可以找到一个 表单提交以下参数: originalSize原始图像大小(宽度,高度)的数组 包含四个已调整点(左上,右上,...

    ymprompt消息提示组件4.0【js插件弹出框美化版】

    //以下参数可用于对组件语言本地化,如用于英文等系统中 okTxt:确定按钮的文本描述,默认为“确定” cancelTxt:取消按钮的文本描述,默认为“取消” closeTxt:关闭按钮的文本描述(鼠标放在关闭按钮上时显示)...

    Javascript下IE与Firefox下的差异兼容写法总结

    如onmousemove=doMouseMove(event) 获取鼠标当前坐标 IE:event.x和event.y。 FF:event.pageX和event.pageY。 通用:两者都有event.clientX和event.clientY属性。 鼠标当前坐标(加上滚动条滚过的距离) IE:event....

    jsp编程技巧集锦

    获取请求中的所有参数? 106.获取完整的请求URL? 107.在重新显示表单时保留用户已经输入的合法数据? 108.使用选代器遍历集合 109.使用特定字符串对一个字符串进行分割? 110.格式化输出数字和字符? ...

    getCountry:通过HTML5地理位置API检索您所在的国家_地区

    该实现将HTML5 navigator.geolocation.getCurrentPosition函数包装在promise中,并使用 lib以便从其坐标中检索一个国家。 用法 getCountry ( ) . then ( function ( country ) { console . log ( country ) ; } ) ...

Global site tag (gtag.js) - Google Analytics