`

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 (topleftright, 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

 
<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

 
<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的用武之地了。而获取元素的偏移量能有什么用,我相信,你懂的~ ^_^

 

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics