`

js getClientRects 和 getBoundingClientRect 的用法和区别

 
阅读更多

转载:http://blog.csdn.net/freshlover/article/details/8985887

 

getClientRects获取元素占据页面的所有矩形区域 

描述

获取元素占据页面的所有矩形区域。

语法

    var rectCollection = object.getClientRects();

getClientRects 返回一个TextRectangle集合,就是TextRectangleList对象。TextRectangle对象包含了, top left bottom right width height 六个属性

TextRectangle

对于文本对象,W3C提供了一个 TextRectangle 对象,这个对象是对文本区域的一个解释。这里的文本区域只针对inline 元素,比如:a, span, em这类标签元素。

浏览器差异
getClientRects() 最先由MS IE提出,后被W3C引入并制订了标准。目前主流浏览器都支持该标准,而IE只支持TextRectangle的top left bottom right四个属性。IE下可以通过right-left来计算width、bottom-top来计算height。
ie 和非ie浏览器在使用getClientRects还是有些差别的,ie获取TextRectangleList的范围很大。而非ie获取的范围比较小, 只有display:inline的对象才能获取到TextRectangleList,例如em i span 等标签。

应用场景
getClientRects常用于获取鼠标的位置,如放大镜效果。微博的用户信息卡也是通过改方法获得的。

---------------------------------------------------------

getBoundingClientRect获取元素位置 

getBoundingClientRect用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置。getBoundingClientRect是DOM元素到浏览器可视范围的距离(不包含文档卷起的部分)。该函数返回一个Object对象,该对象有6个属性:top,lef,right,bottom,width,height;这里的top、left和css中的理解很相似,width、height是元素自身的宽高,但是right,bottom和css中的理解有点不一样。right是指元素右边界距窗口最左边的距离,bottom是指元素下边界距窗口最上面的距离。


下面这是MSDN对document.documentElement.getBoundingClientRect的解释:

Syntax

oRect = object.getBoundingClientRect()

Return Value

Returns a TextRectangle object. Each rectangle has four integer properties (top, left, right, and bottom) that represent a coordinate of the rectangle, in pixels.

Remarks

This method retrieves an object that exposes the left, top, right, and bottom coordinates of the union of rectangles relative to the client's upper-left corner. In Microsoft Internet Explorer 5, the window's upper-left is at 2,2 (pixels) with respect to the true client.

getBoundingClientRect()最先是IE的私有属性,现在已经是一个W3C标准。所以你不用当心浏览器兼容问题,不过还是有区别的:IE只返回top,lef,right,bottom四个值,不够可以通过以下方法来获取width,height的值:

    var ro = object.getBoundingClientRect();
    var Width = ro.right - ro.left;
    var Height = ro.bottom - ro.top;

兼容所有浏览器写法:

    var ro = object.getBoundingClientRect();
    var Top = ro.top;
    var Bottom = ro.bottom;
    var Left = ro.left;
    var Right = ro.right;
    var Width = ro.width||Right - Left;
    var Height = ro.height||Bottom - Top;

有了这个方法,获取页面元素的位置就简单多了:

    var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
    var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;

-------------------------------

getClientRects 和 getBoundingClientRect 的区别

返回类型差异:


getClientRects 返回一个TextRectangle集合,就是TextRectangleList对象。
getBoundingClientRect 返回 一个TextRectangle对象,即使DOM里没有文本也能返回TextRectangle对象.

浏览器差异:

除了safari,firefox2.0外所有浏览器都支持getClientRects和getBoundingClientRect,
firefox 3.1给TextRectangle增加了 width 和 height。

ie 和非ie浏览器在使用getClientRects还是有些差别的,ie获取TextRectangleList的范围很大。而非ie获取的范围比较小, 只有display:inline的对象才能获取到TextRectangleList,例如em i span 等标签。

通过测试,至少Chrome 2+\Safari 4\Firefox3.5\0pera 9.63+已经支持getBoundingClientRect方法。

使用场景差异:


出于浏览器兼容的考虑,现在用得最多的是getBoundingClientRect,经常用来获取一个element元素的viewport坐标。 
网上的例子http://www.360doc.com/content/10/1201/16/3877783_74068281.shtml
http://www.thinksaas.cn/group/explore/index.php?app=group&ac=topic&id=19176

分享到:
评论

相关推荐

    js getBoundingClientRect使用方法详解

    主要介绍getBoundingClientRect的基本属性,以及具体的使用场景和一些需要注意的问题。 getBoundingClientRect Element.getBoundingClientRect() 含义: 方法返回元素的大小及其相对于视口的位置。 值: 返回值...

    js 获取图像缩放后的实际宽高,位置等信息

    项目中遇到图片实际显示尺寸的判定问题,图片可能被缩放过,所以实际显示的宽高无法通过常见的各种width,height拿到(都是得到图像的自然宽度或者...getClientRects 和 getBoundingClientRect 的区别 getClientRects 返回

    详解原生js实现offset方法

    在JavaScript中,`offset`方法通常用于获取一个元素在页面上的绝对位置,包括距离文档顶部和左边的距离。本文将详细讲解两种原生JS实现`offset`的方法。 首先,我们来看第一种实现方式,通过递归实现`offset`方法:...

    JavaScript 空间坐标的使用

    而`getBoundingClientRect`方法则能更稳定地获取元素在视口中的精确位置和大小,如示例代码所示,可以输出一个包含`top`、`right`、`bottom`、`left`、`width`和`height`的对象,从而了解元素在屏幕上的具体位置。...

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

    - `getClientRects()`和`getBoundingClientRect()`:获取Range的几何信息,用于定位和渲染。 在实际开发中,理解和熟练运用这些方法可以帮助开发者更好地操纵文档中的文本选择,实现各种复杂的富文本编辑功能。同时...

    javascript实现textarea中tab键的缩排处理方法

    在JavaScript中,我们可以使用`addEventListener`方法来添加事件监听器: ```javascript document.getElementById('yourTextareaId').addEventListener('keydown', function(event) { // Tab键的keyCode是9 if ...

    jQuery侧面浮动对联广告

    为了确保在不同浏览器和设备上的兼容性,我们可能需要使用 jQuery 的 `$.fn.scroll` 替换原生的 `window.onscroll` 事件,并考虑使用 `$.fn.offset()` 的替代方法,如 `$.fn.position()` 或 `$.fn.getClientRects()`...

    用来实现Web页面图片移动托拽的代码段

    1. **获取初始位置**:通过 `getClientRects()` 方法获取表格元素的位置坐标。 2. **根据预设值或默认值创建图像元素**: - 如果存在预设值(如 `__Gantt` 的值),则根据这些值创建图像元素,并设置它们的起始位置...

Global site tag (gtag.js) - Google Analytics