getBoundingClientRect():

  这个方法返回一个矩形对象,包含四个属性:left、top、right和buttom。分别表示元素各边与页面各边的距离

例如:

var boxPosition = document.getElementById('box');         // 获取元素

alert(box.getBoundingClientRect().top);         // 元素上边距离页面上边的距离

alert(box.getBoundingClientRect().right);       // 元素右边距离页面左边的距离

alert(box.getBoundingClientRect().bottom);      // 元素下边距离页面上边的距离

alert(box.getBoundingClientRect().left);        // 元素左边距离页面左边的距离

js中getBoundingClientrRect()方法的详解的更多相关文章

  1. JS中的event 对象详解

    JS中的event 对象详解   JS的event对象 Event属性和方法:1. type:事件的类型,如onlick中的click:2. srcElement/target:事件源,就是发生事件的 ...

  2. js中中括号,大括号使用详解

    js中中括号,大括号使用详解 一.总结 一句话总结:{ } 是一个对象,[ ] 是一个数组 1.js大括号{}表示什么意思? 对象 { } 大括号,表示定义一个对象,大部分情况下要有成对的属性和值,或 ...

  3. js中鼠标滚轮事件详解

    js中鼠标滚轮事件详解   (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...

  4. Java中getBytes()方法--使用详解

    getBytes()方法详解 在Java中,String的getBytes()方法是得到一个操作系统默认的编码格式的字节数组.这表示在不同的操作系统下,返回的东西不一样! 1. str.getByte ...

  5. JS中的this对象详解

    JS中this关键字很常见,但是它似乎变幻莫测,让人抓狂.这篇文章就来揭示其中的奥秘. 借助阮一峰老师的话:它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用.这句话看似平常,可是要非常注意 ...

  6. JS中的this用法详解

    随着对js的深入学习和使用,你会发现它里面包含了很多令人困惑的机制,比如对象.闭包.原型链继承等等,而这其中肯定包含令你现在或者曾经费解的this,如果你不把心一横,花点时间还真不明白这个this的用 ...

  7. js 中中括号,大括号使用详解

    一.{ } 大括号,表示定义一个对象,大部分情况下要有成对的属性和值,或是函数.如:var LangShen = {"Name":"Langshen",&quo ...

  8. Vue.js中学习使用Vuex详解

    在SPA单页面组件的开发中 Vue的vuex和React的Redux 都统称为同一状态管理,个人的理解是全局状态管理更合适:简单的理解就是你在state中定义了一个数据之后,你可以在所在项目中的任何一 ...

  9. Js中的For循环详解

    大家好,我是逆战班的一员,今天给大家讲解一下Js循环中的For循环. For循环是JS循环中一个非常重要的部分. 我们先讲一下for循环的作用: For循环用在需要重复执行的某些代码,比如从1打印到1 ...

随机推荐

  1. oracle中=>是什么意思呢?

    => 是 Oracle 中调用 存储过程的时候, 指定 参数名进行调用.一般是, 某些参数有默认值的时候,你需要跳过某些参数来进行调用.下面是具体的例子. 参数的默认值SQL> CREAT ...

  2. input 的 pattern 验证表单

    pattern 用于定义验证输入正则表达式 pattern 属性适用于以下 <input> 类型:text, search, url, telephone, email 以及 passwo ...

  3. 如果用HTML5做一个在线视频聊天【原创】

    首先使用node.js 搭建一个简易的 websocket服务器: var cons = new Array(); var ws = require('ws').Server; var server ...

  4. HDU 1251 裸的字典树、入门题

    裸的字典树还是挺简单的. 四个基本操作建立.查找.插入.删除 建立新结点我是用的c++中 new操作.当然也可以用malloc,都方便 不过指针阿.地址阿.这其中关系什么的我貌似还不是很清楚阿. 因为 ...

  5. java.util.NoSuchElementException: No value present

    错误: java.util.NoSuchElementException: No value present 原因: 经查询博客Java 8 Optional类深度解析发现,究其原因为: 在空的Opt ...

  6. H3C 入站包过滤工作流程

  7. H3C DHCP中继基本配置

  8. P1040 快速幂取模

    题目描述 给你三个正整数a,b,m,请你求出 \(a^b \bmod m\) 的结果. 输入格式 一行三个整数 \(a,b,m(1 \le a,b,m \le 10^9)\) . 输出格式 一个整数, ...

  9. H3C开启telnet服务

    [H3C]Telnet server enable       //开启telnet服务

  10. CF161BDiscounts

    CF161B 题目大意;要购买\(n\)件物品,有\(A\)\(B\)两种类型,要求分成\(k\)组,其中如果其中一组含有\(A\)类物品,那么这一组最便宜的一件物品就会半价 怎么分组最小化代价? 我 ...