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. py-day4-4 python 其他内置函数

    # ascii码转换 print(chr(98)) 结果: b print(ord('b')) 结果: 98 # 求几的几次方 print(pow(2,3)) # 2**2 =2*2*2 结果: 8 ...

  2. IPv6学习笔记

    IPv6简写规范: 1)  每个IPv6地址段起始的0可以被省略: 2)  如果一段为4个零,可以简写为一个0 3)  如果有连续的多个段全为0,则可以使用::表示 注:一个地址段中只能有一个::出现 ...

  3. docker--私有仓库

    私有仓库 有时候使用 Docker Hub 这样的公共仓库可能不方便,用户可以创建一个本地仓库供私人使用. 本节介绍如何使用本地仓库. docker-registry 是官方提供的工具,可以用于构建私 ...

  4. eclipse中解决git分支合并冲突

    冲突场景: 在master分支上有文件student.py. 在master上增新一个dev分支 在dev分支上修改文件student.py.增加函数def d():,并commit; 在master ...

  5. win 8.1 Your PC needs to be repaired修复过程

    一.问题情况描述: 下班时,执行关闭系统命令,但硬盘灯一直亮着,因急着下班,所以直接长按电源键,装包回家... 到家后一段时间,启动电脑,但电脑蓝屏,提示“Your PC needs to be re ...

  6. Laravel5笔记--路由

    路由:简单讲就是定义URL请求转向某个业务逻辑(一般是控制器方法)的方法. 1.路由定义文件: /routes/web.php   //定义web访问的路由 /routes/api.php    // ...

  7. 【mark】OS是否使用svc方式分开系统空间和用户空间的优劣

    对于Cortex-M单片机,用户程序调用RTOS系统函数有两种思路: 假设创建任务的RTOS函数是xxx_task_create() 第一类:FreeRTOS.RT-Thread中采用的方法,和调用普 ...

  8. Caching in Presto

    转自:Caching in Presto Qubole’s Presto-as-a-Service is primarily targeted at Data Analysts who are tas ...

  9. 在ubuntu中屏蔽“检测到系统程序出现问题”对话框

    ubuntu各个版本中都会时常遇到 “检测到系统程序出现问题”对话框 这是由于ubuntu系统中的“Apport”即错误信息的收集报告系统,将所有系统错误告警都不分大小和主次全部通知你,严重影响我们正 ...

  10. VMware与Centos系统安装

    Linux介绍 1. Linux Linux和windows一样都是操作系统,Linux是开源的.免费的.自由传播的类Unix操作系统软件. 是一个基于POSIX和UNIX的多用户.多任务.支持多线程 ...