getBoundingClientRect用于获取某个元素相对于视窗的位置集合。

1.语法:这个方法没有参数。

rectObject = object.getBoundingClientRect()

2.返回值类型:TextRectangle对象,每个矩形具有四个整数性质( 上, 右 , 下,和左 )表示的坐标的矩形,以像素为单位。

 rectObject.top:元素上边到视窗上边的距离;

 rectObject.right:元素右边到视窗左边的距离;

 rectObject.bottom:元素下边到视窗上边的距离;

 rectObject.left:元素左边到视窗左边的距离;

rectObject.width: 元素宽度(ie9+),(ie6-8, rectObject.right - rectObject.left)

rectObject.height: 元素高度(ie9+),(ie6-8, rectObject.bottom - rectObject.top)

3. 兼容性ie6以上全支持

4. ie7-的left和top会多出两个像素

解决方法:

var rectLeft = rectObject.left - document.documentElement.clientLeft || 2;
rectRight = rectObject.right - document.documentElement.clientLeft || 2;
rectBottom = rectObject.bottom - document.documentElement.clientTop || 2;
rectTop = rectObject.top - document.documentElement.clientTop || 2;

参考:http://www.cnblogs.com/Songyc/p/4458570.html

getBoundingClientRect说明的更多相关文章

  1. 盒子 offsetLeft、offsetTop、offsetWidth、getBoundingClientRect等属性解释

    offsetLeft 获取的是忽略 margin 当前元素距离上一级父节点(有没有设置position,有的话依据父节点,没有的话依据页面最左端这时候不管滚动条移到哪) 当前元素向左的位置 记住它会将 ...

  2. JavaScript中getBoundingClientRect()方法详解

    获取浏览器滚动的高度: scrollTop=document.documentElement.scrollTop || document.body.scrollTop getBoundingClien ...

  3. js中getBoundingClientRect的作用及兼容方案

    js中getBoundingClientRect的作用及兼容方案 1.getBoundingClientRect的作用 getBoundingClientRect用于获取某个html元素相对于视窗的位 ...

  4. 利用getBoundingClientRect方法实现简洁的sticky组件

    补充于2016-03-20: 本文实现有不足,不完美的地方,请在了解本文相关内容后,移步阅读<sticky组件的改进实现>了解更佳的实现. sticky组件,通常应用于导航条或者工具栏,当 ...

  5. CSSOM之getboundingclientrect和getclientrects

    TextRectangle 对于文本对象,W3C提供了一个 TextRectangle 对象,这个对象是对文本区域的一个解释. 对于 i,span,em等display 是inline的标签,在书写文 ...

  6. getBoundingClientRect在IE9/10里的bug

    getBoundingClientRect可以获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置,最早在IE中实现,后其它浏览器均已实现. 但它在IE9,10中有个bug,当出现垂直滚动条时, ...

  7. getBoundingClientRect详解

    getBoundingClientRect获取的left和top始终是该元素相对于页面原点坐标的位置,当它大于原点坐标则为正数,等于原点坐标为零,小于为负数.

  8. getBoundingClientRect() 来获取页面元素的位置

    getBoundingClientRect() 来获取页面元素的位置   document.documentElement.getBoundingClientRect 下面这是MSDN的解释: Syn ...

  9. getBoundingClientRect()兼容性处理

    getBoundingClientRect() 这个方法返回一个矩形对象,包含四个属性:left.top.right和bottom.分别表示元素各边与页面上边和左边的距离. var box=docum ...

  10. .getBoundingClientRect()

    .getBoundingClientRect() 该方法获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置,他返回的是一个对象,即Object,该对象有4个属性:top,left,right, ...

随机推荐

  1. python零基础学习开篇

    我是某工业大学的一名博士,研究方向是基于人脸的模式识别.很遗憾,毕业后没有继续从事图像处理中模式识别相关研究.多种原因进入了一家国企单位,从事交通方面工作.工作2年中一直迷茫,没有在工作岗位中找到自己 ...

  2. 2717: 递归函数求n的阶乘

    2717: 递归函数求n的阶乘 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 1329  Solved: 942[Submit][Status][Web ...

  3. webgis技术在智慧城市综合治理网格化社会管理平台(综治平台)的应用

      网格化社会管理平台功能:1 实有人口管理人口数据管理按照人口分类进行管理,分为常住人口.流动人口.特殊人群.弱势群体,功能包括人口信息管理.归口负责.人房关联.统计汇总.地图监管服务等功能.人口信 ...

  4. 使用Electron开发PC客户端

    最近公司要求开发一个PC客户端,要求不能使用.NET开发(为了不让用户安装.net framework),所以就选择了Electron(随口听别人说了一句,之前从来没有接触过).目前项目要完毕了,所以 ...

  5. Linux运维笔记--第二部

    第2部-重要目录结构详解 1.回顾Linux目录结构知识 /dev/            设备目录 /etc/             系统配置及服务配置文件,启动命令的目录 /proc       ...

  6. NoSQL 数据库之MongoDB

    1.MongoDB简介 1.1什么是MongoDB MongoDB 是一个跨平台的,面向文档的数据库,是当前 NoSQL 数据库产品中最热门的一种.它介于关系数据库和非关系数据库之间,是非关系数据库当 ...

  7. hessian应用示例

    因为公司的项目远程调用采用的是hessian,故抽时间了解了下hessian,自己也写了一个应用实例,以便加深对hessian的理解. Hessian是一个轻量级的remoting onhttp工具, ...

  8. w3resource_MySQL练习:Joins

    w3resource_MySQL练习题:Joins 1. Write a query to find the addresses (location_id, street_address, city, ...

  9. JdbcTemplate实验

    实验1:测试数据源 @Test public void test() throws SQLException { ApplicationContext ioc = new ClassPathXmlAp ...

  10. LeetCode(260) Single Number III

    题目 Given an array of numbers nums, in which exactly two elements appear only once and all the other ...