`
mutongwu
  • 浏览: 438922 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

getBoundingClientRect 跨浏览器实现

 
阅读更多 
<head>
    <script type="text/javascript">
        function GetOffset (object, offset) {
            if (!object)
                return;
            offset.x += object.offsetLeft;
            offset.y += object.offsetTop;

            GetOffset (object.offsetParent, offset);
        }

        function GetScrolled (object, scrolled) {
            if (!object)
                return;
            scrolled.x += object.scrollLeft;
            scrolled.y += object.scrollTop;

            if (object.tagName.toLowerCase () != "html") {
                GetScrolled (object.parentNode, scrolled);
            }
        }

            // always return 1, except at non-default zoom levels in IE before version 8
        function GetZoomFactor () {
            var factor = 1;
            if (document.body.getBoundingClientRect) {
                    // rect is only in physical pixel size in IE before version 8 
                var rect = document.body.getBoundingClientRect ();
                var physicalW = rect.right - rect.left;
                var logicalW = document.body.offsetWidth;

                    // the zoom level is always an integer percent value
                factor = Math.round ((physicalW / logicalW) * 100) / 100;
            }
            return factor;
        }

        function GetBox () {
            var div = document.getElementById ("myDiv");

            if (div.getBoundingClientRect) {        // Internet Explorer, Firefox 3+, Google Chrome, Opera 9.5+, Safari 4+
                var rect = div.getBoundingClientRect ();
                x = rect.left;
                y = rect.top;
                w = rect.right - rect.left;
                h = rect.bottom - rect.top;

                if (navigator.appName.toLowerCase () == "microsoft internet explorer") {
                    // the bounding rectangle include the top and left borders of the client area
                    x -= document.documentElement.clientLeft;
                    y -= document.documentElement.clientTop;

                    var zoomFactor = GetZoomFactor ();
                    if (zoomFactor != 1) {  // IE 7 at non-default zoom level
                        x = Math.round (x / zoomFactor);
                        y = Math.round (y / zoomFactor);
                        w = Math.round (w / zoomFactor);
                        h = Math.round (h / zoomFactor);
                    }
                }
            }
            else {
                    // older Firefox, Opera and Safari versions
                var offset = {x : 0, y : 0};
                GetOffset (div, offset);

                var scrolled = {x : 0, y : 0};
                GetScrolled (div.parentNode, scrolled);

                x = offset.x - scrolled.x;
                y = offset.y - scrolled.y;
                w = div.offsetWidth;
                h = div.offsetHeight;
            }

            alert ("Left: " + x + "\nTop: " + y + "\nWidth: " + w + "\nHeight: " + h);
        }
    </script>
</head>
<body>
    <div style="height:200px; width:300px; overflow:auto;">
        <div id="myDiv" style="width:250px; height:150px; border:1px solid red;">
            You can get the bounding rectangle of this element 
            relative to the top left corner of the client area with the button below.<br />
            Use the scrollbars to test the placement of the bounding rectangle in different positions.
        </div>
        <div style="width:1000px; height:1000px;"></div>
    </div>
    <br />
    <button onclick="GetBox ();">Get the placement of the element with red border!</button>
</body>
分享到：
| window.name 跨域
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics