三、获取一个元素到页面的距离

3.1 浏览器识别

window.navigator.userAgent

3.2 获取一个元素到页面的距离

思路：

• 获取元素的定位父元素，再获取距离

• 再获取元素的定位父元素的定位父元素，再获取距离

• 再获取元素的定位父元素的定位父元素的定位父元素，直到终点 => body元素，距离相累加

3.2.1 dom结构

<div id="box"></div>
<div id="box1">
    <div id="box2"></div>
</div>

3.2.2 css

#box {
    height: 123px;
    margin-bottom: 100px;
}
#box1 {
    position: relative;
    border-top: 10px solid blue;
}
#box2 {
    position: absolute;
    width: 100px;
    height: 100px;
    left: 100px;
    top: 100px;
    background-color: red;
    border-top: 10px solid orange;
}

3.2.3 执行代码

<script src="js/jquery-1.12.3.min.js"></script>
<script>
    // 定义一个函数，传入一个元素，返回一个对象，对象中要包含该元素的定位值（left， top）

    function offset(dom){
        /* 
            思路：
                获取元素的定位父元素，再获取距离
                再获取元素的定位父元素的定位父元素，再获取距离
                再获取元素的定位父元素的定位父元素的定位父元素，直到终点 => body元素，距离相累加
            */
        // for (, dom != document.body; dom = dom.offsetParent)  通常不这样循环

        // 获取浏览器的信息
        var str = window.navigator.userAgent;
        // 定义变量，简化书写
        var isIE8 = null;
        // 检测浏览器的信息
        if (str.indexOf("MSIE 8.0") === -1){
            // console.log("不是IE8");
            isIE8 = false;
        } else {
            // console.log("是IE8");
            isIE8 = true;
        }

        // 定义对象
        // 一开始不应该加上自己的边框
        var result = {
            top: dom.offsetTop,
            left: dom.offsetLeft
        }

        // 使用while循环
        while (dom != document.body){
            dom = dom.offsetParent;
            // console.log(dom);   获取到body为止

            // 判断是不是IE8
            if (isIE8){
                // 说明是IE8，不需要加上父元素的边框
                result.left += dom.offsetLeft;
                result.top += dom.offsetTop;
            } else {
                // 说明不是IE8 需要额外加上父元素的边框
                result.left += dom.offsetLeft + dom.clientLeft;
                result.top += dom.offsetTop + dom.clientTop;
            }
        }
        
        // 返回对象
        return result;
    }


    // 获取元素
    var box2 = document.getElementById("box2");
    // 调用
    var result = offset(box2);
    console.log(result);

    // js中获取元素到页面的距离
    console.log($("#box2").offset());
</script>

3.2.4 输出结果