2015年1月7日
之前写了一篇元素到网页顶部距离计算方法，其实分明有更好的方法，例如这个方法就不需要写那么复杂的循环了，这里再次总结一下。
请看下面代码，或者查看在线demo调试，看起来兼容性都是OK的。大家可以自己试试。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>the distance to top</title>
<style type="text/css">
div {margin:10px 20px;padding:5px;border:3px solid #aaa;position:relative;}
.para {background-color:#ccc;}
</style>
</head>
<body>
<div class="outer">
<div class="outerWrap">
<div class="header"></div>
<div class="content">
<div class="content-inner">
<p class="para" id="para">
Hello, whidy! 这是一个获取当前元素距离网页顶部高度的计算demo.
</p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
para = document.getElementById('para');
var y = para.offsetTop;
var y2 = para.getBoundingClientRect().top;
while (para = para.offsetParent) {
var oStyle = para.currentStyle? para.currentStyle : window.getComputedStyle(para, null); //currentStyle兼容IE
var borderTopWidth = parseInt(oStyle.getPropertyValue('border-top-width')); //border-top-width实际上用于被包父级层的边框值计算,因此本demo内header的边框值对此处不影响,取而代之的是直接计入content盒子距离outerWrap的高度
if(borderTopWidth) { //如果有边框值则加上边框
y += para.offsetTop + borderTopWidth;
}
console.log(y,'offsetTop');
console.log(y2,'getBoundingClientRect');
}
</script>
</body>
</html>
参考资料: Element.getBoundingClientRect() – Web API 接口 | MDN
大佬啊