页面内某元素到文档顶部的距离计算

之前写了一篇元素到网页顶部距离计算方法,其实分明有更好的方法,例如这个方法就不需要写那么复杂的循环了,这里再次总结一下。

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

作者: whidy

不可忘记初衷,不可迷失方向,所有一切都为梦想... http://www.whidy.net/about (updated 2014-5)

发表评论

电子邮件地址不会被公开。 必填项已用*标注