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 相关文章推荐
探索Emberjs制作一个简单的Todo应用
Nov 07 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
Feb 14 Javascript
javascript数组去重方法分析
Dec 15 Javascript
基于jQuery实现顶部导航栏功能
Dec 27 Javascript
基于JS实现移动端左滑删除功能
Jul 28 Javascript
JavaScript中各数制转换全面总结
Aug 21 Javascript
微信小程序 上传头像的实例详解
Oct 27 Javascript
移动web开发之touch事件实例详解
Jan 17 Javascript
React 路由懒加载的几种实现方案
Oct 23 Javascript
如何优雅地在vue中添加权限控制示例详解
Mar 07 Javascript
浅谈javascript错误处理
Aug 11 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
Sep 21 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代码
2013/11/19 PHP
php生成图片验证码的实例讲解
2015/08/03 PHP
PHP+sqlite数据库操作示例(创建/打开/插入/检索)
2016/05/26 PHP
Mootools 1.2教程 Tooltips
2009/09/15 Javascript
javascript创建和存储cookie示例
2014/01/07 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
2014/08/20 Javascript
javascript中返回顶部按钮的实现
2015/05/05 Javascript
javascript鼠标滑动评分控件完整实例
2015/05/13 Javascript
浅谈关于JavaScript API设计的一些建议和准则
2015/06/24 Javascript
jQuery实现div拖拽效果实例分析
2016/02/20 Javascript
Bootstrap风格的zTree右键菜单
2017/02/17 Javascript
ReactJS实现表单的单选多选和反选的示例
2017/10/13 Javascript
jquery select插件异步实时搜索实例代码
2017/10/20 jQuery
echarts同一页面中四个图表切换的js数据交互方法示例
2018/07/03 Javascript
使用vue cli4.x搭建vue项目的过程详解
2020/05/08 Javascript
剖析Python的Tornado框架中session支持的实现代码
2015/08/21 Python
python使用super()出现错误解决办法
2017/08/14 Python
浅谈使用Python变量时要避免的3个错误
2017/10/30 Python
Python实现的直接插入排序算法示例
2018/04/29 Python
python使用matplotlib模块绘制多条折线图、散点图
2020/04/26 Python
Python 输出详细的异常信息(traceback)方式
2020/04/08 Python
基于python实现地址和经纬度转换
2020/05/19 Python
HTML5的postMessage的使用手册
2018/12/19 HTML / CSS
wordpress添加Html5的表单验证required方法小结
2020/08/18 HTML / CSS
马云的职业生涯规划之路
2014/01/01 职场文书
2014年五一活动策划方案
2014/03/15 职场文书
档案信息化建设方案
2014/05/16 职场文书
金秋助学感谢信
2015/01/21 职场文书
任命书标准格式
2015/03/02 职场文书
学历证明范文
2015/06/16 职场文书
golang在GRPC中设置client的超时时间
2021/04/27 Golang
不要在HTML中滥用div
2021/05/08 HTML / CSS
自己搭建resnet18网络并加载torchvision自带权重的操作
2021/05/13 Python
Go语言实现Snowflake雪花算法
2021/06/08 Golang
Springboot如何使用logback实现多环境配置?
2021/06/16 Java/Android
eval(cmd)与eval($cmd)的区别与联系
2021/07/07 PHP