首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

TextRectangle对象中的getClientRects的步骤

2012-09-06 
TextRectangle对象中的getClientRects的方法这里多行文本:点击span中的文字我是sss!和设计师一样细腻,和

TextRectangle对象中的getClientRects的方法

这里多行文本:点击<span>中的文字
我是sss!和设计师一样细腻,和程序员一样严谨;游走在设计师和工程师之间,游刃于用户体验和技术实现之间,斡旋在用户利益和商业利益之间。——偶是一枚前端开发工程师!
代码
HTML代码

?


<div id="temp">
我是sss!<span id="span">和设计师一样细腻,和程序员一样严谨;游走在设计师和工程师之间,游刃于用户体验和技术实现之间,斡旋在用户利益和商业利益之间。</span>——偶是一枚前端开发工程师!
</div>

?

?

JS代码,默认的参数及调用:
document.getElementById("span").onclick = function() {
??? var objRectList = this.getClientRects(),? length = objRectList.length;
??? console.log(objRectList);
??? var string = "有" + length + "个矩形\r\n";
??? for (var i=0; i<length; i+=1) {
??????? string += "第"+ (i+1) +"个矩形: top:" + objRectList[i].top + ", right:" + objRectList[i].right + ", bottom:" + objRectList[i].bottom + ", left:" + objRectList[i].left + ", width:" + objRectList[i].width + ", height:" + objRectList[i].height + "\r\n";
??? }
??? alert(string);
};

热点排行