distance of ele top document top

distance of ele top document top

by Bai Shun

HTML

<div class="outer">
    <div class="outerWrap">
        <div class="header"></div>
        <div class="content">
            <div class="content-inner">
            <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" style="padding-top:10px;margin-top:20px;" />
                <p class="para" id="para">
                    Hello, whidy! 这是一个获取当前元素距离网页顶部高度的计算demo.<br/>
                    <span id="distance"></span>
                </p>
            </div>
        </div>
    </div>
</div>

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;
    }
    document.getElementById('distance').innerHTML = "offsetTop is " + y + "<br/>and getBoundingClientRect " + y2;
    console.log(y,'offsetTop');
    console.log(y2,'getBoundingClientRect');
}