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 相关文章推荐
移动节点的jquery代码
Jan 13 Javascript
基于javascript简单实现对身份证校验
Jan 25 Javascript
JavaScript中获取纯正的undefined的方法
Mar 06 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
Nov 25 Javascript
基于ES6 Array.of的用法(实例讲解)
Sep 05 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
Feb 08 Javascript
实现高性能javascript的注意事项
May 27 Javascript
vue+moment实现倒计时效果
Aug 26 Javascript
layui实现tab的添加拒绝重复的方法
Sep 04 Javascript
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
vue使用Sass时报错问题的解决方法
Oct 14 Javascript
vue3种table表格选项个数的控制方法
Apr 14 Vue.js
用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
《APMServ 5.1.2》使用图解
2006/10/23 PHP
PHP将进程作为守护进程的方法
2015/03/19 PHP
CI框架整合widget(页面格局)的方法
2016/05/17 PHP
php分页查询mysql结果的base64处理方法示例
2017/05/18 PHP
PHP编程获取各个时间段具体时间的方法
2017/05/26 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
JavaScript 乱码问题
2009/08/06 Javascript
js 金额文本框实现代码
2012/02/14 Javascript
在父页面调用子页面的JS方法
2013/09/29 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
2014/08/18 Javascript
jquery实现滑动特效代码
2015/08/10 Javascript
javascript实现支持移动设备画廊
2015/08/24 Javascript
封装属于自己的JS组件
2016/01/27 Javascript
简单实现js间歇或无缝滚动效果
2016/06/29 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
2016/11/30 Javascript
JavaScript+HTML5实现的日期比较功能示例
2017/07/12 Javascript
nodejs中express入门和基础知识点学习
2018/09/13 NodeJs
基于vue实现移动端圆形旋钮插件效果
2018/11/28 Javascript
[02:25]DOTA2英雄基础教程 虚空假面
2014/01/02 DOTA
[01:09:24]Ti4开幕式
2014/07/19 DOTA
Django中传递参数到URLconf的视图函数中的方法
2015/07/18 Python
Python设计模式之门面模式简单示例
2018/01/09 Python
python 删除非空文件夹的实例
2018/04/26 Python
Python urlencode和unquote函数使用实例解析
2020/03/31 Python
Python基于百度AI实现OCR文字识别
2020/04/02 Python
用HTML5制作数字时钟的教程
2015/05/11 HTML / CSS
跑步爱好者一站式服务网站:Jack Rabbit
2016/09/01 全球购物
MVMT手表官方网站:时尚又实惠的高品质手表
2016/12/04 全球购物
.net面试题
2016/09/17 面试题
实习自我鉴定范文
2013/10/30 职场文书
三年级数学教学反思
2014/01/31 职场文书
出纳员岗位职责风险
2014/03/06 职场文书
四群教育工作实施方案
2014/03/26 职场文书
活动总结结尾怎么写
2014/08/30 职场文书
2016幼儿园教师节新闻稿
2015/11/25 职场文书
基于Java的MathML转图片的方法(示例代码)
2021/06/23 Java/Android