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. python实现将字符串中以大写字母开头的单词前面添加“_”下划线

    在工作中写测试用例代码生成的时候,函数命令考虑采用参数文件的名称来命名,但是发现文件命名是驼峰的写写法,所以想按照字符串中的大写字母做分割,每个单词前面添加下划线,主要考虑采用正则的模式来匹配,替换然 ...

  2. 线程中AutoResetEvent与ManualResetEvent的区别

    线程之间的通信是通过发信号来进行沟通的.. ManualResetEvent发送Set信后后,需要手动Reset恢复初始状态.而对于AutoResetEvent来说,当发送完毕Set信号后,会自动Re ...

  3. [ZZ] Valse 2017 | 生成对抗网络（GAN）研究年度进展评述

    Valse 2017 | 生成对抗网络(GAN)研究年度进展评述 https://www.leiphone.com/news/201704/fcG0rTSZWqgI31eY.html?viewType ...

  4. 上传本地代码到gitHub过程详解

    1.注册Github账号 2.创建自己的GitHub仓库 3.创建自己的Repository(项目的名字等) 4.复制创建仓库的地址到Git命令窗口并执行命令行(Git clone 仓库的复制地址) ...

  5. 新建服务器出现错误 Peer authentication failed for user "postgres" 的解决办法

    用pgadmin3 新建服务器出现错误 Peer authentication failed for user "postgres" 在stackoverflow上找到答案,出现此 ...

  6. Centos7下安装pptp客户端

    1.使用yum安装ppp和pptp yum install ppp pptp 2.配置pptp pptpsetup --create vpn连接名称(自定义) --server VPN服务器IP -- ...

  7. Git使用，将本地项目推送到GitHub上

    首先本地仓库中创建一个项目 ex: proA 在远程github仓库中创建项目 ex: proA 在本地仓库proA下打开terminal 使用命令: 1.git add * 2.git commit ...

  8. 二维码（android）

    我们都知道一般的二微码都是以不同形式显示有的是登入,有的是网页,其实二维码只是一个字符串.到这里我们就有一个疑问那二维码是这样判断是网站或者是登入功能的呢? 其实这些判断部分,二维码生成器早就给你完成 ...

  9. ubuntu16.04上vue环境搭建

    $ sudo apt-get install python-software-properties $ curl -sL https://deb.nodesource.com/setup_8.x | ...

  10. LeetCode【104. 二叉树的最大深度】

    最开始的想法就是递归,但是,自己想的太麻烦,每个节点与null相比较,如果都不为null,count就加一,然后输出count, 其实,这中间有很多错误,然后,就想着想着就绕不出来了.然后,重新思考了 ...