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对象。
例如:
更多资料,参考:
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
——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