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. 字符串的驻留(String Interning)

    http://www.cnblogs.com/artech/archive/2007/03/04/663728.html 关于字符串的驻留的机制,对于那些了解它的人肯定会认为很简单,但是我相信会有很大 ...

  2. java中IO流之字节字符流的总结概述

    概念        这么庞大的体系里面,常用的就那么几个,我们把它们抽取出来,如下图: Java语言定义了许多类专门负责各种方式的输入或者输出,这些类都被放在java.io包中.其中, 所有输入流类都 ...

  3. iframe的document操作

    导语: 在我写网页代填插件的时候,有遇到拿不到input元素的时候,这时候我去看元素布局,发现有些网站登录那一块是用iframe标签写的,这时候我需要取到的那就是iframe标签下input元素 1. ...

  4. java基础—方法重载(overload)

    一.方法的重载 方法名一样,但参数不一样,这就是重载(overload). 所谓的参数不一样,主要有两点:第一是参数的个数不一样,第二是参数的类型不一样.只要这两方面有其中的一方面不一样就可以构成方法 ...

  5. c#List结合IEqualityComparer求交集

    List元素类: public class MultiPointSearchingRet { public int ID { get; set; } public string PlateNumber ...

  6. 计算机应用第三次作业:自动开机自动关机 常用DOS命令 关于文件文件夹

    一.自动开机 台式机启动时按住DEL键 进入一个蓝色的界面,界面上是英文提示 这个界面是BIOS  ,是在机器的ROM中存储 二.自动关机 自动重启 方法一在120秒钟后自动关机 win+r (RUN ...

  7. 数据预处理之数据规约(Data Reduction)

    数据归约策略 数据仓库中往往具有海量的数据,在其上进行数据分析与挖掘需要很长的时间 数据归约 用于从源数据中得到数据集的归约表示,它小的很多,但可以产生相同的(几乎相同的)效果 数据归约策略 维归约  ...

  8. PAT 乙级 1086

    题目 题目地址:PAT 乙级 1086 思路 本题比较简单,但还是存在小小的坑点,简单说一下: 倒置中需要注意的唯一问题就是:100倒置后不是001,而是1:这个问题处理之后还要注意另一个点就是,10 ...

  9. shopnc路由功能分析

    项目核心文件 core/shopld.php if (!@include(BASE_DATA_PATH.'/config/config.ini.php')) exit('config.ini.php ...

  10. spring bean的介绍以及xml和注解的配置方法

    5.Bean 下边我们来了解一下Bean的: Bean的作用域Bean的生命周期Bean的自动装配Resources和ResourceLoader 5.1Bean容器的初始化 Bean容器的初始化 两 ...