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 相关文章推荐
用js实现的仿sohu博客更换页面风格(简单版)
Mar 22 Javascript
风吟的小型JavaScirpt库 (FY.JS).
Mar 09 Javascript
Html中JS脚本执行顺序简单举例说明
Jun 19 Javascript
基于jquery的滚动鼠标放大缩小图片效果
Oct 27 Javascript
js取消单选按钮选中并判断对象是否为空
Nov 14 Javascript
常见的原始JS选择器使用方法总结
Apr 09 Javascript
js时间日期格式化封装函数
Dec 02 Javascript
js css自定义分页效果
Feb 24 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
May 24 Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
Oct 11 Javascript
Vue实现点击按钮复制文本内容的例子
Nov 09 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
PHILIPS D1835/D1875的电路分析与打理
2021/03/02 无线电
PHP读取ACCESS数据到MYSQL的代码
2011/05/11 PHP
php中通过DirectoryIterator删除整个目录的方法
2015/03/13 PHP
启用OPCache提高PHP程序性能的方法
2019/03/21 PHP
使用git迁移Laravel项目至新开发环境的步骤详解
2020/04/06 PHP
js 提交和设置表单的值
2008/12/19 Javascript
jQuery中[attribute!=value]选择器用法实例
2014/12/31 Javascript
angularJS 中$attrs方法使用指南
2015/02/09 Javascript
jQuery简单实现tab选项卡切换效果
2016/06/20 Javascript
JavaScript中获取HTML元素值的三种方法
2016/06/20 Javascript
javascript代码调试之console.log 用法图文详解
2016/09/30 Javascript
微信小程序 input输入框详解及简单实例
2017/01/10 Javascript
vue2.0获取自定义属性的值
2017/03/28 Javascript
jQuery插件之validation插件
2017/03/29 jQuery
vue-cli+webpack记事本项目创建
2017/04/01 Javascript
AngularJS中下拉框的基本用法示例
2017/10/11 Javascript
vue.js中$set与数组更新方法
2018/03/08 Javascript
Bootstrap 中data-[*] 属性的整理
2018/03/13 Javascript
Angular5中调用第三方库及jQuery的添加的方法
2018/06/07 jQuery
jQuery+vue.js实现的多选下拉列表功能示例
2019/01/15 jQuery
jquery实现Ajax请求的几种常见方式总结
2019/05/28 jQuery
Vue.js watch监视属性知识点总结
2019/11/11 Javascript
JavaScript回调函数callback用法解析
2020/01/14 Javascript
python 定时器,实现每天凌晨3点执行的方法
2019/02/20 Python
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
2019/06/17 Python
python的mysql数据库建立表与插入数据操作示例
2019/09/30 Python
PyCharm 专业版安装图文教程
2020/02/20 Python
Ann Taylor官方网站:美国最大的女性产品制造商之一
2016/09/14 全球购物
阿根廷首家户外用品制造商和经销商:Montagne
2018/02/12 全球购物
be2台湾单身男女交友:全球网路婚姻介绍的领导品牌
2019/10/11 全球购物
机械工程师的岗位职责
2013/11/17 职场文书
酒店销售主管岗位职责
2014/01/04 职场文书
如何写好升职自荐信
2014/01/06 职场文书
2014年社区民政工作总结
2014/12/02 职场文书
婚姻出轨保证书
2015/05/08 职场文书
MySQL实现字段分割一行转多行的示例代码
2022/07/07 MySQL