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. [转]Java调用Javascript、Python算法总结

    最近项目中经常需要将Javascript或者Python中的算法发布为服务,而发布Tomcat服务则需要在Java中调用这些算法,因此就不免要进行跨语言调用,即在Java程序中调用这些算法. 不管是调 ...

  2. maven+eclipse+jboss+oracle 12c+memcached+AngularJS

    Maven 参考梁总的: Eclipse Java EE IDE for Web Developers集成的Maven 3 指向自己安装的 Maven Maven下载.安装和配置(二) 在本地配置ma ...

  3. 360软件的木马查杀、漏洞修复等组件不能使用，提示runtime error

    一.故障现象:1.360软件的木马查杀.漏洞修复等组件不能使用,提示runtime error2.暴风影音等很多软件不能正常使用3.设备管理器不能打开,提示“MMC 不能打开文件”4.部分https安 ...

  4. 使用velodyne16线激光雷达跑loam-velodyne

    一.velodyne-VLP16使用教程 推荐网址: http://blog.csdn.net/littlethunder/article/details/51920681 https://www.c ...

  5. CentOS 6 update curl

    touch /etc/yum.repos.d/city-fan.repo vi /etc/yum.repos.d/city-fan.repo add the following: [CityFan] ...

  6. 20175236 2018-2019-2 《Java程序设计》第五周学习总结

    教材学习内容总结 接口回调 1.接口属于引用型变量,可以存放实现该接口类的实例的引用,即存放对象的引用. 2.接口回调理解上跟对象的上转型对象差不多. 理解接口 接口可以抽象出重要的行为标准. 接口多 ...

  7. [UE4]Spline使用注意事项

    一.如果在Character中使用Spline,则使用Add Spline Mesh Componet的时候,要注意设置Transform.Mobility为Movable 二.使用Predict P ...

  8. Tree Traversals Again

    An inorder binary tree traversal can be implemented in a non-recursive way with a stack. For example ...

  9. c#调用python代码

    c#调用python的方法比较多,比如ironpython,尽管不用安装python环境,可是不兼容python众多的包,也只更新到了python2,通过创建python进程这种方式可以很好的解决兼容 ...

  10. MySQL 错误集-汇总

    Q&A: MySQl报错之@@GLOBAL.GTID_PURGED can only be set when @@GLOBAL.GTID_MODE = ON 导入的时候加入-f参数即可 原因分 ...