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获取元素在页面上的位置的更多相关文章

  1. js 获取元素在页面上的偏移量的最佳方式

    使用js制作效果时,我们常常要获取某个元素在页面上的偏移量(例如tip提示框功能).而获取偏移量可以直接获取相对于document的偏移量,也可以获取相对与视口的偏移量(viewpoint)加上页面滚 ...

  2. javascript: Element.getBoundingClientRect() 获取元素在网页上的坐标位置

    来自:https://blog.csdn.net/weixin_42895400/article/details/81811095?utm_source=blogxgwz1 Element.getBo ...

  3. 关于js获取元素在屏幕中的位置的方法

    针对我们获取元素在页面中的位置的问题,我们还是用老师一峰老师的方法来解决吧 下面上HTML代码 <div class="left_footer"> <p data ...

  4. 我的前端工具集（八）获得html元素在页面中的位置

    我的前端工具集(八)获得html元素在页面中的位置   liuyuhang原创,未经允许禁止转载 目录 我的前端工具集 有时候需要用点击等操作,来获取某元素在页面中的位置,然后在该位置添加某些操作 如 ...

  5. jquery获取元素到页面顶部距离

    jquery获取元素到页面顶部距离的语句为: $(selector).offset().top

  6. getBoundingClientRect方法获取元素在页面中的相对位置

    获取元素位置可以用 offset 或 getBoundingClientRect,使用 offset 因为兼容性不好,比较麻烦,offset获取位置会形成"回溯".而 getBou ...

  7. 获取元素在页面中位置 getBoundingClientRect()

    DOM 原生方法getBoundingClientRect()获取元素相对视口位置 DOMRect 对象包含了一组用于描述边框的只读属性--left.top.right和bottom,单位为像素.除了 ...

  8. javascript getBoundingClientRect()获取元素四个边相对于窗口或文档的位置

    Element.getBoundingClientRect()返回元素的大小及相对于窗口的位置 语法: rectObject=object.getBoundingClientRect(); 返回值是一 ...

  9. jQuery检查某个元素在页面上是否存在

    用jQuery检查某个元素在网页上是否存在时,应该根据获取元素的长度来判断,代码如下: if($("#tt").length > 0) { //元素存在时执行的代码 } 具体 ...

随机推荐

  1. python3-基础7

    协程函数 面向过程编程 递归与二分法 内置函数   lambda 模块与包的使用 import from ... import ... 常用模块 ########################### ...

  2. Linux环境下使用Android NDK编译c/c++生成可执行文件

    1.安装Android NDK至Linux(Lubuntu 16) 从网上下载 android-ndk-r13b-linux-x86_64.zip,本人将其解压至/home/guanglun/work ...

  3. sybase解决死锁

    解决Sybase数据库死锁的方法 https://blog.csdn.net/lileizhang/article/details/45816509

  4. 理解OpenShift（5）：从 Docker Volume 到 OpenShift Persistent Volume

    理解OpenShift(1):网络之 Router 和 Route 理解OpenShift(2):网络之 DNS(域名服务) 理解OpenShift(3):网络之 SDN 理解OpenShift(4) ...

  5. EL表达式取Map,List值的总结

    EL表达式取Map中的值:后台action 中: Map map = new HashMap(); map.put(key1,value1); map.put(key2,value2); map.pu ...

  6. ArcGIS紧凑型缓存存储格式分析

    by 蔡建良 2018-8-24 网络中我看到的网文将bundle存储切片数据的方式都没说清或是说错.按照错误方法一样可以在桌面浏览,但在arcgis for android却无法浏览. bundlx ...

  7. js判断是否安装某个android app，没有安装下载该应用(websocket通信，监听窗口失去焦点事件)

    现在经常有写场景需要提示用户下载app, 但是如果用户已经安装,我们希望是直接打开app. 实际上,js是没有判断app是否已经安装的方法的,我们只能曲线救国. 首先,我们需要有call起app的sc ...

  8. 01-JDK环境配置

    环境说明: Window server 2008 64位 jdk-7u80-windows-x64 apache-tomcat-7.0.57-windows-x64 1.安装JDK环境配置 JAVA_ ...

  9. 转:Eclipse中web项目部署至Tomcat步骤

    原址:http://blog.csdn.net/lucklq/article/details/7621807 Eclipse的web工程至Tomcat默认的部署目录是在工程空间下,本文旨在将部署目录改 ...

  10. JAVA相关技术

    开发服务器环境: 1.Linux系统 CentOS 6.5\7 2.JDK1.8 3.tomcat 9 4.mysql 5.7 开发环境: 1.开发集成工具:idea 2.构建工具maven 仓库暂时 ...