TextRectangle对象中的getClientRects的实例页面

说明
回到相关文章 >>

这里多行文本:点击<span>中的文字

我是！和设计师一样细腻,和程序员一样严谨;游走在设计师和工程师之间,游刃于用户体验和技术实现之间,斡旋在用户利益和商业利益之间。——偶是一枚前端开发工程师！

代码

HTML代码
<div id="temp">

我是！<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);
};