`
mutongwu
  • 浏览: 449834 次
  • 性别: 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 跨域
评论
发表评论

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

相关推荐

    各种常用浏览器getBoundingClientRect的解析

    浏览器getBoundingClientRect解析 浏览器中的getBoundingClientRect方法是获取元素的矩形边界...只有通过了解浏览器getBoundingClientRect方法的实现差异和应用场景，才能更好地使用该方法，实现跨浏览器兼容的代码。

    跨浏览器可8方向拖拽剪裁框

    在实际的开发过程中，实现跨浏览器的8方向拖拽剪裁框需要考虑以下几个关键点： 1. **事件监听**：需要监听鼠标移动、按下和释放等事件，以便在用户操作时更新剪裁框的位置。 2. **坐标系统**：理解DOM元素的坐标...

    js中getBoundingClientRect( )方法案例详解.docx

    本文将详细介绍`getBoundingClientRect()`方法的基本用法、返回值、跨浏览器兼容性问题及其实现细节，并通过具体的实例来帮助读者更好地理解和应用该方法。 #### 二、`getBoundingClientRect()`方法概述 `...

    js中getBoundingClientRect的作用及兼容方案详解

    在现代Web开发中，获取页面中元素的精确位置是非常常见的需求，尤其在...文档提供的兼容方案是实现跨浏览器兼容的有效手段之一，它确保了即使在不支持`width`和`height`属性的旧浏览器中，也能够得到准确的尺寸数据。

    javascript Range对象跨浏览器常用操作第1/2页

    在实现这些功能时，开发者需要考虑跨浏览器的兼容性问题，因此掌握TextRange和DOM Range对象的使用至关重要。 对于Range对象的其他常用方法和属性，包括但不限于： - `collapse()`：将范围收缩到一个点，常用于开始...

    js getBoundingClientRect() 来获取页面元素的位置

    3. **兼容性**：虽然现在大多数现代浏览器都支持`getBoundingClientRect()`，但在编写跨浏览器的代码时，仍然需要注意可能存在的不兼容问题。确保在老版本的浏览器中进行适当的处理或使用polyfill库来模拟这个方法的...

    js 鼠标画线 兼容主流浏览器

    综上所述，实现“js 鼠标画线 兼容主流浏览器”功能需要对JavaScript事件处理、HTML5 Canvas API以及跨浏览器兼容性有深入理解。项目中的代码可能包含了以上提到的所有细节，通过分析这些代码，我们可以学习到如何在...

    Firefox getBoxObjectFor getBoundingClientRect联系

    这个方法更简洁，跨浏览器兼容性更好，是获取元素尺寸和位置的首选方式。 在Firefox中，特别是当网页含有Flash内容时，浏览器会发出警告，不建议使用 `getBoxObjectFor()`，因为这个方法在处理Flash对象时可能会...

    图片瀑布流jQuery代码兼容ie6+主流浏览器

    4. **CSS响应式设计**：为了实现跨浏览器兼容，特别是IE6+，可能需要使用一些CSS Hack或者条件注释，以解决不同浏览器之间的样式差异问题。 5. **图片加载处理**：由于图片加载可能存在延迟，所以瀑布流布局需要在...

    javascript实现的广告漂浮

    确保代码具有良好的跨浏览器兼容性是非常重要的。 6. **性能优化**：频繁的`scroll`事件可能导致性能问题，因为事件处理器可能会被频繁调用。为了提高性能，可以使用`requestAnimationFrame`或者`throttle/debounce...

    JS获得鼠标位置（兼容多浏览器ie,firefox）

    总结起来，要实现跨浏览器的鼠标位置获取，主要涉及以下几点： 1. 使用`event.clientX`和`event.clientY`获取页面坐标。 2. 针对IE，需要考虑`window.pageXOffset`和`window.pageYOffset`的偏移量。 3. `...

    没有兼容问题的做圆角的JS代码

    标题提到的“没有兼容问题的做圆角的JS代码”可能是指一种使用JavaScript实现的跨浏览器的圆角解决方案。 JavaScript实现圆角的方法通常包括使用CSS3前缀、内联SVG、画布（Canvas）或图片精灵等技术。在没有CSS3...

    详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题

    })`来实现跨浏览器的动画滚动效果。这样，无论用户使用Firefox还是Chrome，都能享受到一致的用户体验。 总的来说，处理`scrollTop`的兼容性问题需要开发者对不同浏览器的特性和API有深入理解。使用`...

    JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)

    例如，IE6和Firefox对`clientWidth`、`clientHeight`、`offsetWidth`和`offsetHeight`的处理方式有所不同，因此在编写跨浏览器的代码时需要注意这些差异，并可能需要使用条件语句或者库（如jQuery）来确保一致性。...

    图片点击放大.rar

    为了使这个功能支持大多数浏览器，开发者可能使用了polyfills（兼容性补丁）或者跨浏览器的JS库，比如Modernizr来检测浏览器特性。同时，考虑到“一键梭哈”的描述，可能还有一个按钮或快捷键设置，让用户一键切换到...

    拖拽功能的实现

    为了实现跨浏览器兼容性，可能需要使用`getBoundingClientRect()`来获取元素相对于视口的位置，而不是直接使用`offsetLeft`和`offsetTop`。此外，还可以考虑添加边界检测，防止元素移出容器。 在`Skins`文件夹中，...

    js控制div+css弹出层实现拖拽

    为了实现跨浏览器兼容性，可能还需要使用`addEventListener`或`attachEvent`方法来添加事件监听器，以及处理鼠标坐标与元素位置之间的差异。 在实际项目中，`win`这个文件可能包含了实现上述功能的HTML、CSS和...

    div层高度可拖动demo

    通过分析和学习这个文件，我们可以更深入地理解如何用jQuery实现跨浏览器的`div`拖动高度功能。同时，这也是一个提升前端开发技能的好机会，尤其是对于理解DOM操作、事件处理和浏览器兼容性问题有很好的实践价值。

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