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均无关)

via:http://www.cnblogs.com/illele/archive/2009/03/18/1415802.html

js获取控件位置的更多相关文章

  1. js获取控件位置以及不同浏览器中的差别

    js获取控件位置(坐标位置)在不同浏览器中的差别. //获取坐标位置 function getpos(e) { var t=e.offsetTop; var l=e.offsetLeft; var h ...

  2. asp.net js获取控件ID

    ClientID是由ASP.Net生成的服务器控件得客户端标识符,当这个控件生成到客户端页面的时候,在客户端代码访问该控件时就需要通过ClientID来访问. 以文本框为例: 一.未使用母版页 js可 ...

  3. js获得控件位置

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...

  4. Qt获取控件位置,坐标总结

    总结的结果是: QMouseEvent中两类坐标系统,一类是窗口坐标,一类是显示器坐标.   总结一:经过试验,QMouseEvent::globalPos()  和 QCursor::pos()效果 ...

  5. swift 获取控件位置 大小

    var SearchBtn = uibutton() SearchBtn.frame.origin.x   //获取坐标x SearchBtn.frame.origin.Y  // 获取坐标Y Sea ...

  6. javascript控制滚动条的位置,获取控件的位置

    一.如下是定位鼠标在视窗中的位置,先定位视窗和页面直接的距离. function getMousePoint() { var point = {x:0,y:0}; // 如果浏览器支持 pageYOf ...

  7. 获取控件id

    普通状态中JS获取控件IDdocument.getElementById('controlID'); JS获取父窗口控件IDwindow.parent.document.getElementById( ...

  8. jQuery学习笔记(控件位置定位、尺寸大小的获取等)

    想做一个幽灵按钮出来,效果大概如下图: 当点击按钮的时候,会有四根线条从四个方向飞入,经历从“无-有-无”的闪入过程. 那么我的设计想法是,先在HTML中定义一个按钮,然后在jQuery中设计按钮点击 ...

  9. js中使用控件名和数组下标方式获取控件的值时失败

    在做界面展示时涉及到表单行项目的增加和删除时,我们一帮都使用js的脚本实现表单行的增加和删除,那么在进行表单的提交的时我们会再页面上进行提交数据的初步校验,进行数据的初步校验时,就要动态获取控件的值. ...

随机推荐

  1. 视频媒体播放,最好的 HTML 解决方法

    最好的 HTML 解决方法 HTML 5 + <object> + <embed> <video width="320" height="2 ...

  2. AsyncSocket 使用

    今天使用AsyncSocket模拟及时通信,在这里记录一下,免得以后自己又犯相同的错误 1>创建客户端和服务器socket /** * 设置socket */ - (void)setupSock ...

  3. C#隐藏桌面图标和任务栏

    最近因为项目需要需要实现桌面图标和任务状态栏的隐藏功能,实现的方式很多,比如修改注册表值,调用windows API函数等.经过一番的查阅,这个功能暂时实现了,或许不是很好的方法,但是我预期的效果达到 ...

  4. ExtJs005继承

    Ext.onReady(function () { //extend 继承 Ext.define('Person', { config: { name: 'aaa' }, //给当前定义的类加一个构造 ...

  5. spring4.1.3+springmvc+mybatis3.2.1整合

    注意:这里使用了mybatis3.2.1版本,刚开始用了3.4.1的版本,会报一个很奇怪的错(java.lang.AbstractMethodError: org.mybatis.spring.tra ...

  6. 浅谈Struts2(四)

    一.Struts2的拦截器(Intercept) 作用:把多个Action中的共有代码,提取至拦截器,从而减少Action中的冗余代码. 1.Action拦截器 a.编写interceptor类 pu ...

  7. java freemark生成word文档

    1.下载freemarker-2.3.19.jar 2.把要填充的内容用  ${title},${no}代替 3.用word 打开,保存为2003xml 4.打开生成xml文件,看下有没有把表达式  ...

  8. mysql xtrabackup 备份恢复实现,mysql命令备份数据库,打包压缩数据库

    简介 Xtrabackup是由percona提供的mysql数据库备份工具,据官方介绍,这也是世界上惟一一款开源的能够对innodb和xtradb数据库进行热备的工具.特点: (1)备份过程快速.可靠 ...

  9. Ubuntu安装配置TFTP服务

    tftpd-hpa 是一个功能增强的TFTP服务器.它提供了很多TFTP的增强功能,它已经被移植到大多数的现代UNIX系统. 1.安装 sudo apt-get install tftpd-hpa t ...

  10. (C#)Windows Shell 外壳编程系列7 - ContextMenu 注册文件右键菜单

    原文 (C#)Windows Shell 外壳编程系列7 - ContextMenu 注册文件右键菜单 (本系列文章由柠檬的(lc_mtt)原创,转载请注明出处,谢谢-) 接上一节:(C#)Windo ...