getBoundingClientRect 可以用来获取 元素 相对视图左上角的位置。它的返回值是一个对象,包含4个属性:{top:0,left:0,bottom:0,right:0},
——FirefoxV3.1+扩展了该对象,添加了width,height属性。
默认它是不计算页面的滚动距离的,跨浏览器的解决方案,可以参考jQuery的offset方法。
getClientRects 可以把一段文本是为"盒子"来处理。也就是说,可以用来计算一段文本的行数,高度、宽度。它的返回值是一个数组对象,
包含了TextRectangle 对象{top:0,left:0,bottom:0,right:0,width:0,height:0}。
IE支持block元素和inline元素里面文本.IE9+支持width、height属性。
其它浏览器仅支持 inline元素,对于block元素里面的文本,仅看做一个,数组包含一个TextRectangle对象。
例如:
// 假如 这里的文本做10行显示。
<span id="pp">这里是一大段文本</span>
var pp = document.getElementById("pp");
var aList = pp.getClientRects();
console.log(aList.length); // 10
//------------------------------------------
这里是一大段文本
var pp = document.getElementById("pp");
var aList = pp.getClientRects();
console.log(aList.length); // IE:10; 其它浏览器:1
更多资料,参考:
https://developer.mozilla.org/en-US/docs/DOM/element.getClientRects
https://developer.mozilla.org/en-US/docs/DOM/element.getBoundingClientRect
http://msdn.microsoft.com/zh-cn/subscriptions/downloads/hh779967.aspx
http://msdn.microsoft.com/zh-cn/subscriptions/downloads/hh780167.aspx
分享到:
相关推荐
返回值是一个 DOMRect 对象,这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即:是与该元素相关的CSS 边框集合。 属性值: top: 元素上边距离页面上边的距离 left: 元素右边距离页面左边的...
js getBoundingClientRect() 来获取页面元素的位置.docx
1、getBoundingClientRect的作用 getBoundingClientRect用于获取某个html元素相对于视窗的位置集合。...分别表示元素各边与页面上边和左边的距离。 var box=document.getElementById('box'); // 获取元素
getBoundingClientRect
js getBoundingClientRect使用方法详解.docx
所以,网页元素的相对位置就是 var X= this.getBoundingClientRect().left; var Y =this.getBoundingClientRect().top; 再加上滚动距离,就可以得到绝对位置 var X= this.getBoundingClientRect().left+document....
请使用 element.getBoundingClientRect()。 经本人测试,确实是Firefox在含flash的网页上提示,还不知道原因,也没找到解决办法。 Firefox版本:3.0.3 Flash: 10.0 html页面代码: 代码如下:<html> <body&...
js中getBoundingClientRect( )方法案例详解.docx
js中getBoundingClientRect的作用及兼容方案详解.docx
与getBoundingClientRect返回的 rect 对象不同,此对象是可修改的,因此您可以根据需要添加或减去属性。 默认情况下,顶部、左侧、右侧和底部属性相对于文档的左上角,考虑了滚动偏移。 如果您想要相对于视口的值...
项目中遇到图片实际显示尺寸的判定问题,图片可能被缩放过,所以实际显示的宽高无法通过常见的各种width,height拿到(都是得到图像的自然宽度或者...getClientRects 和 getBoundingClientRect 的区别 getClientRects 返回
本文介绍这种组件的实现思路,并提供一个同时支持将sticky元素固定在顶部或底部的具体实现,由于这种组件在网站中非常常见,所以有必要掌握它的实现方式,以便在有需要的时候基于它的思路写出功能更多的组件出来
响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 例5-3 第5章 HTML5 画布 getBoundingClientRect()
该方法已经不再是IE Only了,FF3.0+和Opera9.5+已经支持了该方法,可以说在获得页面元素位置上效率能有很大的提高,在以前版本的Opera和Firefox中必须通过循环来获得元素在页面中的绝对位置。
document.documentElement.getBoundingClientRect下面这是MSDN的解释: Syntax oRect = object.getBoundingClientRect()Return Value Returns a TextRectangle object. Each rectangle has four integer properties ...
如何知道某个元素在视口中是否可见。 点击下面的链接查看博客文章