`

javascript位置相关（二）--getBoundingClientRect

 
阅读更多

http://msdn.microsoft.com/en-us/library/ms536433(VS.85).aspx

getBoundingClientRect method

[注意：IE的版本8以下，计算的位置是从（2，2开始的）]

11 out of 18 rated this helpful - Rate this topic
 

Retrieves an object that specifies the bounds of a collection of TextRectangle objects.

Syntax

object.getBoundingClientRect()

Parameters

This method has no parameters.

Return value

Type: TextRectangle

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

Standards information

There are no standards that apply here.

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.

Examples

This example uses the getClientRects and getBoundingClientRect methods to highlight text lines in an object.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/rectselection.htm

JavaScript
 
<head>
<script type="text/javascript">
  var rcts;
  var keyCount = 0;
  function Highlight(obj) {
    rcts = obj.getClientRects();
    rctLength = rcts.length;
    if (keyCount > rctLength - 1) {
      idBeige.style.display = "none";
      keyCount = 0
    }
    // set the rendering properties for the yellow DIV
    cdRight = rcts[keyCount].right + idBody.scrollLeft;
    cdLeft = rcts[keyCount].left + idBody.scrollLeft;
    cdTop = rcts[keyCount].top + idBody.scrollTop;
    cdBottom = rcts[keyCount].bottom + idBody.scrollTop;
    idYellow.style.top = cdTop;
    idYellow.style.width = (cdRight - cdLeft) - 5;
    idYellow.style.display = 'inline';
    // set the rendering properties for the beige DIV
    bndRight = obj.getBoundingClientRect().right +
	    idBody.scrollLeft;
    bndLeft = obj.getBoundingClientRect().left +
	    idBody.scrollLeft;
    bndTop = obj.getBoundingClientRect().top +
	    idBody.scrollTop;
    idBeige.style.top = bndTop;
    idBeige.style.width = (bndRight - bndLeft) - 5;
    idBeige.style.height = cdTop - bndTop;
    if (keyCount > 0) {
      idBeige.style.display = 'inline';
    }
    keyCount++;
  }
</script>
</head>
<body id="idBody">
<div id="oID_1" onclick="Highlight(this)"
    onkeydown="Highlight(this)">
A large block of text should go here. Click this
block of text multiple times to see each line
highlight with every click of the mouse button.
Once each line has been highlighted, the process
begins again starting with the first line.
</div>
<div style="position:absolute; left:5; top:400;
z-index:-1; background-color:yellow; display:none"
ID="idYellow"></div>
<div style="position:absolute; left:5; top:400;
z-index:-1; background-color:beige; display:none"id="idBeige"></div>
</body>

This example uses the TextRectangle collection with the getClientRects and getBoundingClientRect methods to determine the position of the text rectangle within an element. In each line, the left-justified text does not extend to the right margin of the box that contains the text. Using the collection, you can determine the coordinates of the rectangle that surrounds only the content in each line. The example code reads these rectangle coordinates and instructs the ball to move over the text only, and not to the end of the line.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/rectdemo.htm

JavaScript
 
<head>
<script type="text/javascript">
var timid = -1;
var timoID_2 = -1;
var nLine;
var nPosInLine;
var oRcts;
var nDivLen;
var nEraser;
function LoadDone() {
    oTextRange = document.body.createTextRange();              
    // Get bounding rect of the range
    oRcts = oTextRange.getClientRects();
    nLine = 0;
    oBndRct = obj.getBoundingClientRect();
    nDivLen = oBndRct.right - oBndRct.left + 1;    
    MoveTo();
}
function MoveTo() {
    if (nLine >= oRcts.length) {
	    nLine = 0;
	}
    obj.style.top = oRcts[nLine].top;
    nPosInLine = oRcts[nLine].left;
    nEraser = 0;
    timoID_2 = setInterval("MoveToInLine()",60);    
}
function MoveToInLine() {
    if (nPosInLine >= oRcts[nLine].right - nDivLen) {
        clearInterval(timoID_2);
        timoID_2 = -1;
        obj.style.left = oRcts[nLine].right - nDivLen;
        nLine++;
        timid = setTimeout("MoveTo()", 100);
        return;
    }
    if (nEraser == 0) {
	    nEraser = 1;
	}
    else {
	    nEraser = 0;
	}
	im.src = "/workshop/graphics/dot.png";
    obj.style.left = nPosInLine;
    nPosInLine += 3;
}
function End() {
    if(timid != -1) {
	    clearInterval(timid);
        timid = -1;
	}
    if(timoID_2 != -1) {
	    clearInterval(timoID_2);
        timoID_2 = -1;
	}
}
</script>
</head>
<body id="bodyid" onload="LoadDone()"
    onresize="End();LoadDone();" onunload="End()">
<p style="text-align:center">
<b>The quick brown fox jumps over the lazy dog.</b>
</p>
<div id="obj" style="position:absolute">
<img id="im" src="/workshop/graphics/dot.png"
    border="0" height="16" width="16">
</div>
</body>

 

以下部分转载（http://www.cnblogs.com/2050/archive/2012/02/01/2335211.html）

getBoundClientRect函数详解

一、定义

    getBoundingClientRect 函数是W3C组织在第一版本的W3C CSSOM View specification草案中确定的一个标准方法，在此之前，只有IE浏览器是支持该方法的，W3C在这次草案中把它扶正成为标准，足可以看出它并不简单。getBoundingClientRect 方法返回的是调用该方法的元素的TextRectangle对象，该对象具有top、left、right、bottom四个属性，分别代表该元素上、左、右、下四条边界相对于浏览器窗口左上角（注意，不是文档区域的左上角）的偏移像素值。

二、兼容性

    getBoundingClientRect方法最先在IE5中出现，后来被W3C接纳成为标准。目前IE5.5+、Firefox 3.5+、Chrome 4+、Safari 4.0+、Opara 10.10+等浏览器均支持该方法，兼容性几乎完美。

 

    在具体表现方面，Firefox6以前的版本使用getBoundingClientRect时不能获取到top和bottom这两个属性值，Firefox6及以后的版本和其他支持getBoundingClientRect方法的浏览器则top、left、right、bottom四个属性值均能获取到。需要说明的是由于某些版本的IE浏览器的<html>文档根元素默认是有2px边框的,所以这里需要特别处理一下，微软MSDN上说在IE5中会存在这样的情况，但据我实际测试，xp系统中IE6也存在这样的问题，奇怪的是，我在win7环境下用IETester测试的IE各版本都是正常的。但这并不是什么大问题，我们只要把得到的值减去html根元素（body也可考虑进来）的clientLeft或clientTop就能保持各浏览器一致啦。 

三、用途

     当getBoundingClientRect刚被w3c列为标准的时候，PPK还曾质疑过它是不是多此一举，因为已经存在类似的方法来获取元素的偏移位置，比如offsetLeft和offsetTop。但Jquery的作者John Resig马上阐明了getBoundingClientRect的用处。用传统的方法固然可以实现getBoundingClientRect同样的功能，但兼容各种浏览器以及各种不同的元素就会把你弄死，而且效率还非常低下。所以获取页面上某个元素相对于浏览器窗口的偏移量就成了getBoundingClientRect的用武之地了。而获取元素的偏移量能有什么用，我相信，你懂的~ ^_^

 

 

分享到：
| setTimeout 使用
评论
发表评论

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

相关推荐

    javascript经典特效---按钮上的说明文字.rar

    通过`getBoundingClientRect()`方法获取按钮的几何信息，计算出提示框的合适位置。 此外，还可以使用现成的库，如jQuery UI、Bootstrap等，它们提供了成熟的工具提示插件，简化了开发过程。例如，在Bootstrap中，只...

    javascript经典特效---可移动的层.rar

    7. **浏览器兼容性**：JavaScript的某些API在不同浏览器中可能存在差异，因此在编写代码时需要考虑兼容性问题，例如使用`getBoundingClientRect`获取元素相对于视口的位置，或者使用`addEventListener`和`...

    javascript经典特效---最大、最小化按钮.rar

    例如，使用`getBoundingClientRect()`方法获取元素相对于视口的位置信息，以便在最大化时正确填充整个屏幕。 6. **响应式设计**：对于移动设备，最大化和最小化的效果可能需要根据屏幕尺寸进行调整。可以使用媒体...

    javascript经典特效---按钮控制图片移动.rar

    - 为了保证在不同的浏览器上效果一致，可能需要使用`getBoundingClientRect()`来获取元素相对于视口的位置，而不是依赖`offsetTop`和`offsetLeft`。 - 考虑到旧版浏览器的兼容性，可能需要用到IE的`attachEvent()`...

    javascript经典特效---任意位置显示导航信息.rar

    `getBoundingClientRect()`方法可以获取元素相对于视口的位置信息，包括`top`、`right`、`bottom`和`left`等属性，从而帮助我们确定导航信息的精确位置。 5. **动画效果**：为了让用户体验更佳，可能会添加动画效果...

    javascript经典特效---显示鼠标选中内容.rar

    1. 鼠标事件：JavaScript提供了多种与鼠标相关的事件，如`mouseover`, `mouseout`, `mousedown`, `mouseup`和`mousemove`。在这个特效中，我们可能会关注`mouseup`事件，因为它发生在用户释放鼠标按钮时，此时用户...

    javascript经典特效---最大、最小化按钮2.rar

    在“最大、最小化按钮2.htm”文件中，可能还包含了更复杂的设计，例如使用CSS3动画来平滑过渡，或者使用`getBoundingClientRect()`获取元素相对于视口的位置来进行更精确的布局调整。此外，为了提高可维护性和复用性...

    javascript经典特效---可移动的页面窗口.rar

    可能还会涉及CSS样式控制，比如设置窗口为绝对定位，使其脱离文档流，便于通过JavaScript调整位置。 总结来说，"JavaScript经典特效——可移动的页面窗口"是一个关于使用JavaScript实现拖放功能的教程，涵盖了...

    javascript经典特效---撞击小游戏.rar

    JavaScript可以通过获取元素的边界盒子（getBoundingClientRect）来确定其位置和大小，然后比较两个元素的边界是否相交，判断是否存在碰撞。 事件处理在游戏交互中起到关键作用。例如，用户可能通过键盘控制游戏...

    javascript经典特效---显示鼠标坐标.rar

    然而，这些坐标是基于视口的，为了得到相对于整个文档的坐标，我们需要考虑到滚动条的影响，所以引入了`getBoundingClientRect()`方法来获取元素的位置，然后根据窗口的偏移量进行修正。 最后，我们将计算出的坐标...

    javascript经典特效---滚动的导航文字栏.rar

    2. 获取当前元素的位置：使用`getBoundingClientRect()`方法获取元素相对于视口的位置。 3. 更新位置：通过修改元素的`style.top`或`style.left`属性来改变其位置，模拟滚动。 4. 设置边界条件：当元素到达特定边界...

    javascript经典特效---滚动到边不停.rar

    4. **计算位置**：JavaScript可以通过`getBoundingClientRect()`方法获取元素在视口中的位置信息，包括顶部、底部、左侧和右侧距离。这些信息对于判断元素是否已到达屏幕边缘至关重要。 5. **动画效果**：为了平滑...

    javascript经典特效---固定文字说明的导航.rar

    这种效果主要通过JavaScript和CSS结合实现，CSS用于基本布局和样式设置，而JavaScript则用来处理动态行为，如检测滚动位置并调整导航的状态。 首先，我们需要在HTML中创建导航结构。一个简单的例子可能包括`&lt;nav&gt;`...

    javascript经典特效---滚动链接导航.rar

    综上所述，实现JavaScript滚动链接导航涉及到的知识点有：事件监听、元素位置计算、视口判断、样式修改、性能优化、响应式设计以及辅助功能的考虑。掌握这些技能不仅可以提升网页的用户体验，也是现代前端开发者必备...

    javascript经典特效---滚动的超级链接.rar

    这涉及到`getBoundingClientRect`方法，它返回元素的几何信息，包括其相对于视口的位置。 4. **CSS样式改变**：当链接进入或离开视口时，我们可以动态改变它的CSS样式，如添加或移除高亮效果。这可以通过修改元素的...

    javascript经典特效---滚动到边停.rar

    2. **获取元素位置**：可以使用`getBoundingClientRect()`方法获取元素相对于视口的位置信息，包括`top`, `right`, `bottom`, 和 `left`等属性。 3. **判断边界**：比较元素的`top`或`bottom`与视口的`scrollTop`和...

    javascript经典特效---整个页面任意移动.rar

    1. **CSS样式操作**：JavaScript可以通过`style`属性直接修改元素的CSS样式，如位置（`left`、`top`）、大小（`width`、`height`）等。例如，`element.style.left = '100px'`将使元素左边界移动到距其父元素左侧100...

    javascript 获取元素位置的快速方法 getBoundingClientRect()

    所以，网页元素的相对位置就是 var X= this.getBoundingClientRect().left; var Y =this.getBoundingClientRect().top; 再加上滚动距离，就可以得到绝对位置 var X= this.getBoundingClientRect().left+document....

    javascript getBoundingClientRect() 来获取页面元素的位置的代码[修正版]第1/2页

    `getBoundingClientRect()` 是JavaScript中一个非常实用的DOM方法，它用于获取元素在视口中的边界信息，包括元素的顶部、底部、左侧和右侧相对于视口的位置。这个方法在现代浏览器中广泛支持，包括IE5以上版本、Fire...

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