javascript获得元素的尺寸和位置一 : offsetTop/Left、offsetWidth/Height、offsetParent
在学习offset的相关属性前，必须明确指出offsetHeight/Width、offsetTop/offsetLeft等返回的都是只读的并且以数字的形式返回像素值（例如，返回12，而不是'12px'）。
定位父元素：指在CSS中某一元素domElement[position:relative/absolute] 所相对定位的元素。
1、offsetParent
对于offsetParent来讲，最重要的是能够知道 domElement.offsetParent 指向的是哪个元素。然而对于这一点不同的浏览器之间有一些微妙的差异。
a、domElement设置了position:relative/absolute属性：
domElement.offsetParent指向的是该元素的定位父元素。
但也有一个bug，见一下代码：
代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rain Man</title>
<style type="text/css">
#target{ position:relative; }
</style>
<script type="text/javascript">
window.onload = function(){
var target = document.getElementById('target');
alert(target.offsetParent == document.documentElement); //IE中指向<html>元素
alert(target.offsetParent == document.body); //FF、Safari等指向<body>元素
};
</script>
</head>
<body>
<div id="outer" class="test">
<div id="inner">
<div id="target" class="test">Target<br />rainman</div>
</div>
</div>
</body>
</html>
b、domElement没有设置position:relative/absolute，即static：
这一点所有的浏览器基本相同，domElement的offsetParent指向的是离domElement最近的拥有 position:relative/absolute属性的父级元素。若不存在，则指向 <body>元素。但这种情况也有例外，如果domElement是<td>则 offsetparent 指向<table>
c、关于offsetParent的实例：
代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rain Man</title>
<style type="text/css">
#outer { position:absolute;}
</style>
<script type="text/javascript">
window.onload = function(){
var target = document.getElementById('target');
var outer = document.getElementById('outer');
alert(target.offsetParent == outer); //true
};
</script>
</head>
<body>
<div id="outer" class="test">
<div id="inner">
<div id="target" class="test">Target<br />rainman</div>
</div>
</div>
</body>
</html>
代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rain Man</title>
<style type="text/css">
</style>
<script type="text/javascript">
window.onload = function(){
var target = document.getElementById('target');
alert(target.offsetParent == document.body); //true
};
</script>
</head>
<body>
<div id="outer" class="test">
<div id="inner">
<div id="target" class="test">Target<br />rainman</div>
</div>
</div>
</body>
</html>
2、offsetLeft/Top
offsetLeft： 该元素左border的左边缘 到 该元素的offsetParent的左border内边缘的水平距离。
offsetTop：该元素的上border的上边缘 到 该元素的offsetParent的上border内边缘的垂直距离。
代码：
代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rain Man</title>
<style type="text/css">
*{margin:0px; padding:0px;}
.test{
padding:5px;
margin:10px;
color:#fff;
border:7px solid #000;
background-color:#CC66FF;
}
#target{
position:absolute;
left:3px;
top:9px;
width:100px;
height:100px;
}
#outer{
position:relative;
width:300px;
height:300px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var target = document.getElementById('target');
alert(target.offsetLeft); //13 = margin-10px + left-3px
};
</script>
</head>
<body>
<div id="outer" class="test">
<div id="inner">
<div id="target" class="test">Target<br />rainman</div>
</div>
</div>
</body>
</html>
3、offsetWidth/offsetHeight
给出元素在页面中占据的宽度和高度的总计。注意：把元素的边框和滚动条计算在内。
offsetWidth = border-left-width + padding-left + width + padding-right + border-right-width;
offsetHeight = border-top-width + padding-top + height + padding-bottom + border-bottom-width;
4、相关应用
a、获得一个元素的实际宽度和高度，例如：一个自适应高度的段落，往往可以通过获得该元素CSS层叠后的最终高度【见下代码】，但是这种方法在IE中有时返回的是auto，所以使用一个元素的offsetWidth/offsetHeight是比较理想的方法。
function getStyle(elem , type){
var typeface = '';
if(elem.currentStyle)
typeface = elem.currentStyle[type];
else if(window.getComputedStyle)
typeface = window.getComputedStyle(elem , null)[type];
return typeface;
}
获得一个元素位置的可移植的方法：在窗口中的位置
function getX(elem){
var x = 0;
while(elem){
x = x + elem.offsetLeft;
elem = elem.offsetParent;
}
return x;
}
function getY(elem){
var y = 0;
while(elem){
y = y + elem.offsetTop;
elem = elem.offsetParent;
}
return y;
}
