这里多行文本:点击<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);
};
分享到:
相关推荐
js getBoundingClientRect() 方法的语法为:element.getBoundingClientRect(),返回一个 TextRectangle 对象,该对象有四个整数属性(top、left、right 和 bottom),这些属性表示元素在客户端窗口中的坐标值,以...
最后我用的方法是新建一个table,并把源tr克隆到新table中,然后通过对新table定位来实现效果。 用这个方法关键有两点,首先要做一个仿真度尽可能高的tr,还有是要准确的定位,这些请看后面的程序说明。 程序说明 ...
Returns a TextRectangle object. Each rectangle has four integer properties (top, left, right, and bottom) that represent a coordinate of the rectangle, in pixels. Remarks This met
document.documentElement.getBoundingClientRect下面这是MSDN的解释: Syntax oRect = object.getBoundingClientRect()Return Value Returns a TextRectangle object. Each rectangle has four integer properties ...
// TextRectangle {left, top, right и bottom} evt.related; // HTMLElement on which have guided evt.relatedRect; // TextRectangle originalEvent.clientY; // mouse position // return false; — for ...