js 获取控件位置 (坐标位置) 在不同浏览器中的差别,在本文为大家详细介绍下,感兴趣的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
- //获取坐标位置
- 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 控件自身的高度,整型,单位像素。 我们对前面提到的 "上方或上层" 与 "左方或上层" 控件作个说明。 例如: "提交" 按钮的 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 差异如下: (需要提一下:CSS 中的 margin 属性,与 clientWidth、offsetWidth、clientHeight、offsetHeight 均无关)
来源: