获取元素的页面位置，兼容各浏览器

<!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>
    <title></title>
</head>
<body>
<div id="test"></div>
    <script>
        /**
        *获取页面元素的滚动位置
        @param {DOM} el Dom元素
        *return {Object} 元素滚动位置对象
        */
        function getScroll (el) {
            var d = el,
                doc = document,
                body = doc.body,
                docElement = doc.documentElement,
                l,
                t,
                ret,
                isStrict = document.compatMode == "CSS1Compat",
                isIE = /msie/.test(navigator.userAgent);

            if (d == doc || d == body) {
                if (isIE && isStrict) {
                    l = docElement.scrollLeft;
                    t = docElement.scrollTop;
                } else {
                    l = window.pageXOffset;
                    t = window.pageYOffset;
                }
                ret = {
                    left: l || (body ? body.scrollLeft : 0),
                    top: t || (body ? body.scrollTop : 0)
                };
            } else {
                ret = {
                    left: d.scrollLeft,
                    top: d.scrollTop
                };
            }

            return ret;
        }
        /**
        *获取页面元素的位置
        @param {DOM} el Dom元素
        *return {Object} 元素位置对象
        */
        function getXY (el) {
            var doc = document, bd = doc.body,
                docEl = doc.documentElement,
                leftBorder = 0,
                topBorder = 0,
                ret = [0, 0],
                round = Math.round,
                box,
                scroll,
                isIE = /msie/.test(navigator.userAgent);


            if (el != doc && el != bd) {
                if (isIE) {
                    try {
                        box = el.getBoundingClientRect();
                        // 在ie8之前版本,  documentElement 元素会有两像素的边框, 所以要减去它
                        topBorder = docEl.clientTop || bd.clientTop;
                        leftBorder = docEl.clientLeft || bd.clientLeft;
                    } catch (ex) {
                        box = { left: 0, top: 0 };
                    }
                } else {
                    box = el.getBoundingClientRect();
                }

                scroll = getScroll(document);
                ret = [round(box.left + scroll.left - leftBorder), round(box.top + scroll.top - topBorder)];
            }
            return ret;
        }
        var div = document.getElementById("test");
        var sc = getXY(div);
        console.log(sc);
    </script>
</body>
</html>

相关阅读:
noip模拟赛钻石
 noip模拟赛整除
 noip模拟赛拼不出的数
 noip模拟赛正方形
 noip模拟赛财富
 noip模拟赛 a
Java基础知识强化23：Java中数据类型转换（面试题）
Java基础知识强化22：Java中数据类型转换
 Java基础知识强化21：Java中length、length()、size()区别
 MySQL（12）：windows下解决mysql忘记密码
原文地址：https://www.cnblogs.com/dkwlxq/p/2957497.html