首页 > 代码库 > getBoundingClientRect获取元素在页面上的位置
getBoundingClientRect获取元素在页面上的位置
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>
getBoundingClientRect获取元素在页面上的位置
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。