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. 解决jenkins git timeout的问题

    进入项目配置(project configure) "源码管理"选项卡中,找到Additional Behaviours点击旁边的 add   image.png 点击advanc ...

  2. javascript多语言设定方式

    1.控件文字语言设定 1.1 设定两个结构变量,定义好每一个控件需要用到的值,称它字典对象 var languagecn = { 1089: "夹柄不到位", 1090: &quo ...

  3. 数据库-Oracle的使用

    数据库的作用不言而喻,Oracle 作为一个主流的数据库,了解更是需要的 安装好oracle之后,登录初始账号,一般而言呢,我就新建一个用户, --创建新用户,用户名为JohnWu ,密码为 root ...

  4. Windows下访问控制管理

    参考URL: https://blog.csdn.net/u011801161/article/details/45567289 http://blog.nsfocus.net/analysis-wi ...

  5. MJRefresh在Xode6中报错处理

      MJRefresh在Xcode6中会报错,objc_msgSend(self.beginRefreshingTaget, self.beginRefreshingAction, self),简单调 ...

  6. Windows10最新更新破坏了PowerShell功能

    Java9%E6%8E%A5%E8%BF%91%E4%BA%A4%E4%BB%98%E6%97%A5%E6%9C%9F%E5%92%8C%E8%8C%83%E5%9B%B4%E5%AE%A1%E6%9 ...

  7. shell脚本三——正则表达式

    shell函数:shell中允许将一组命令集合或语句形成一段可用代码,这些代码块称为shell函数.给这段代码起个名字称为函数名,后续可以直接调用该段代码. 格式:fun() { 命令 } Shell ...

  8. django中forms和modelform组件的区别

    首先,我们来看看modelform的实现 model.py class Book(models.Model): title=models.CharField(max_length=32) price= ...

  9. java-设计模式-索引

    设计模式的七大原则 设计模式遵循的七大原则 微信红包的设计实践 单例模式 常见的几种单例模式写法 单例模式的应用场景及优缺点 面向对象六大设计原则 JAVA设计模式之观察者模式 JAVA设计模式之策略 ...

  10. S表示1，L表示2，计算由S和L组成的序列之和为N的组合

    def func(n): def calc_str(s): s = s.strip() if s is not None else "" s = s.upper() result ...