正文

getBoundingClientRect获取元素在页面上的位置

IP云
IP云V管理员/6 阅读
06/25
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

getBoundingClientRect用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。

getBoundingClientRect是DOM元素到浏览器可视范围的距离（不包含文档卷起的部分）。

该函数返回一个Object对象，该对象有6个属性：top,lef,right,bottom,width,height；

这里的top、left和css中的理解很相似，width、height是元素自身的宽高，但是right，bottom和css中的理解有点不一样。right是指元素右边界距窗口最左边的距离，bottom是指元素下边界距窗口最上面的距离。

getBoundingClientRect最先是IE的私有属性，现在已经是一个W3C标准。所以不用担心浏览器兼容问题，不过还是有区别的：IE只返回top,lef,right,bottom四个值，width,height的值需要用right-left,bottom-top算出来。

var ele = document.getElementById("demo").getBoundingClientRect(),
     t = ele.top,
     b = ele.bottom,
     l = ele.left,
     r = ele.right,
     w = ele.width || r - l,
     h = ele.height || b - t;

写了个DEMO，如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>getBoundingClientRect</title>
</head>
<body>
<script>
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};var Class = {
create: function() {
return function() { this.initialize.apply(this, arguments); }
}
}var Bind = function(object, fun) {
return function() {
return fun.apply(object, arguments);
}
}var BindAsEventListener = function(object, fun) {
return function(event) {
return fun.call(object, (event || window.event));
}
}function addEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
};function removeEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.removeEventListener) {
oTarget.removeEventListener(sEventType, fnHandler, false);
} else if (oTarget.detachEvent) {
oTarget.detachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = null;
}
};var SimpleDrag = Class.create();
SimpleDrag.prototype = {
initialize: function(drag) {
this.Drag = $(drag);
this.left = $("left");
this.right = $("right");
this.top = $("top");
this.bottom = $("bottom");
this.width = $("width");
this.height = $("height");
this._x = this._y = 0;
this._fM = BindAsEventListener(this, this.Move);
this._fS = Bind(this, this.Stop);
this.Drag.style.position = "absolute";
addEventHandler(this.Drag, "mousedown", BindAsEventListener(this, this.Start));
},
Start: function(oEvent) {
this._x = oEvent.clientX - this.Drag.offsetLeft;
this._y = oEvent.clientY - this.Drag.offsetTop;
addEventHandler(document, "mousemove", this._fM);
addEventHandler(document, "mouseup", this._fS);
},
Move: function(oEvent) {
this.clsSelect();
this.Drag.style.left = oEvent.clientX - this._x + "px";
this.Drag.style.top = oEvent.clientY - this._y + "px";
//获取元素位置代码
this.left.innerHTML = this.Drag.getBoundingClientRect().left;
this.right.innerHTML = this.Drag.getBoundingClientRect().right;
this.top.innerHTML = this.Drag.getBoundingClientRect().top;
this.bottom.innerHTML = this.Drag.getBoundingClientRect().bottom;
this.width.innerHTML = this.Drag.getBoundingClientRect().width||this.Drag.getBoundingClientRect().right-this.Drag.getBoundingClientRect().left;
this.height.innerHTML = this.Drag.getBoundingClientRect().height||this.Drag.getBoundingClientRect().bottom-this.Drag.getBoundingClientRect().top;
},
Stop: function() {
removeEventHandler(document, "mousemove", this._fM);
removeEventHandler(document, "mouseup", this._fS);
},
clsSelect:'getSelection' in window ? function () {
window.getSelection().removeAllRanges();
} : function () {
try {
document.selection.empty();
} catch (e) {};
}
};</script>
<table width="300" border="1">
<tr>
<td colspan="2">信息</td>
</tr>
<tr>
<td width="100">left:</td>
<td id="left"></td>
</tr>
<tr>
<td>top:</td>
<td id="top"></td>
</tr>
<tr>
<td>right:</td>
<td id="right"></td>
</tr>
<tr>
<td>bottom:</td>
<td id="bottom"></td>
</tr>
<tr>
<td>width:</td>
<td id="width"></td>
</tr>
<tr>
<td>height:</td>
<td id="height"></td>
</tr>
</table>
<div id="idDrag" style="background:blue; width:50px; height:50px;"></div><script>
new SimpleDrag("idDrag");
</script></body>
</html>