js 获取不同浏览器控件位置的差别解析

这篇文章主要为大家详细介绍了js 获取不同浏览器控件位置的差别解析，具有一定的参考价值，可以用来参考一下。

经测试代码如下：

/**
 * 获取坐标位置
 *
 * @param 
 * @arrange (512.笔记) www.q1010.com
 **/
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 也是可以的，二者的区别是： offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样道理。 以上主要指IE之中，FireFox差异如下： (需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

本文来自：http://www.q1010.com/174/565-0.html

注：关于js 获取不同浏览器控件位置的差别解析的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：浏览器