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


Posted in Javascript onAugust 08, 2013
//获取坐标位置 
function getpos(e) { 
var t=e.offsetTop; 
var l=e.offsetLeft; 
var height=e.offsetHeight; 
while(e=e.offsetParent) { 
t+=e.offsetTop; 
l+=e.offsetLeft; 
} 
}

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

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

例如:

<div id="tool"> 
<input type="button" value="提交"> 
<input type="button" value="重置"> 
</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 相关文章推荐
用Javscript实现表单复选框的全选功能
May 25 Javascript
为javascript添加String.Format方法
Aug 11 Javascript
jQuery实现网页抖动的菜单抖动效果
Aug 07 Javascript
ES6学习之变量的解构赋值
Feb 12 Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
解析Vue 2.5的Diff算法
Nov 28 Javascript
基于input动态模糊查询的实现方法
Dec 12 Javascript
vue计算属性computed的使用方法示例
Mar 13 Javascript
浅谈js闭包理解
Mar 28 Javascript
layui复选框的全选与取消实现方法
Sep 02 Javascript
layui的表单提交以及验证和修改弹框的实例
Sep 09 Javascript
使用refresh_token实现无感刷新页面
Apr 26 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
Aug 08 #Javascript
Jquery chosen动态设置值实例介绍
Aug 08 #Javascript
extjs两个tbar问题探讨
Aug 08 #Javascript
JS实现随机数生成算法示例代码
Aug 08 #Javascript
判断是否安装flash player及当前版本的JS代码
Aug 08 #Javascript
js 为label标签和div标签赋值的方法
Aug 08 #Javascript
JS模拟自动点击的简单实例
Aug 08 #Javascript
You might like
php下实现农历日历的代码
2007/03/07 PHP
php学习笔记之 函数声明(二)
2011/06/09 PHP
PHP判断搜索引擎蜘蛛并自动记忆到文件的代码
2012/02/04 PHP
php随机显示指定文件夹下图片的方法
2015/07/13 PHP
php 把数字转换成汉字的代码
2015/07/21 PHP
PHP面向对象程序设计之构造方法和析构方法详解
2019/06/13 PHP
ExtJs GridPanel简单的增删改实现代码
2010/08/26 Javascript
将string解析为json的几种方式小结
2010/11/11 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
2013/06/04 Javascript
JS中图片缓冲loading技术的实例代码
2013/08/29 Javascript
各种页面定时跳转(倒计时跳转)代码总结
2013/10/24 Javascript
JS中表单的使用小结
2014/01/11 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
javascript编写贪吃蛇游戏
2015/07/07 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
2015/08/21 Javascript
javascript实现瀑布流加载图片原理
2016/02/02 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
2016/06/08 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
2017/09/11 Javascript
JS实现瀑布流布局
2017/10/21 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
2018/08/19 Javascript
小程序实现左滑删除功能
2018/10/30 Javascript
[04:19]完美世界携手游戏风云打造 卡尔工作室模型介绍篇
2013/04/24 DOTA
python中django框架通过正则搜索页面上email地址的方法
2015/03/21 Python
使用Python实现简单的服务器功能
2017/08/25 Python
PyQt5内嵌浏览器注入JavaScript脚本实现自动化操作的代码实例
2019/02/13 Python
Django使用Celery加redis执行异步任务的实例内容
2020/02/20 Python
Windows环境下Python3.6.8 importError: DLLload failed:找不到指定的模块
2020/11/01 Python
python3列表删除大量重复元素remove()方法的问题详解
2021/01/04 Python
html5 input元素新特性_动力节点Java学院整理
2017/07/06 HTML / CSS
必须要使用游标的SQL语句有那些
2012/05/07 面试题
大学四年的个人自我评价
2014/01/14 职场文书
出纳会计岗位职责
2014/03/12 职场文书
党员承诺书怎么写
2014/05/20 职场文书
材料物理专业求职信
2014/09/01 职场文书
中学教师个人总结
2015/02/10 职场文书
幼儿园迎新生欢迎词
2015/09/30 职场文书