js 获取html 控件坐标

======================================================
注：本文源代码点此下载
======================================================

假设 obj 为某个 html 控件。

obj.offsettop 指 obj 距离上方或上层控件的位置,整型,单位像素。

obj.offsetleft 指 obj 距离左方或上层控件的位置,整型,单位像素。

obj.offsetwidth 指 obj 控件自身的宽度,整型,单位像素。

obj.offsetheight 指 obj 控件自身的高度,整型,单位像素。

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

例如:

“提交”按钮的 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均无关)

本人博客的文章大部分来自网络转载,因为时间的关系,没有写明转载出处和作者。所以在些郑重的说明:文章只限交流,版权归作者。谢谢

绿色通道:好文要顶关注我收藏该文与我联系

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/