getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。

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

rectObject = object.getBoundingClientRect();

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

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

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

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

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

示图:

3. 兼容性:我用ie11的Document Mode模式测试,ie5以上都能支持。

PC端:

Mobile端:

4.width和height:ie9以上支持width/height属性。

兼容ie6~ie8的width/height的写法:

var rectWidth = rectObject.right - rectObject.left;
rectHeight = rectObject.bottom - rectObject.top;

5.在ie7及ie7以下left和top会多出两个像素。

ie7下测试:

chrome下测试:

在百度经验下找到document.documentElement在ie7及ie7以下会多出两个像素。为了搞明白document.documentElement是什么?我把它的tagName打印出来。

ie7下:

在ie7及ie7以下的html元素坐标会从(2, 2)开始算起,在ie8已经修复了这个bug。这就是多出两个像素的原因。下面我们做下兼容:

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://jingyan.baidu.com/article/8cdccae960b041315413cdcd.html

freshlover的博客:http://blog.csdn.net/freshlover/article/details/8985887

MDN:https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

MDSN:https://social.msdn.microsoft.com/Search/zh-CN?query=getBoundingClientRect&emptyWatermark=true&ac=4

getBoundingClientRect的用法的更多相关文章

  1. js中getBoundingClientRect()的用法介绍

    平时经常获取一个div的位置,用了定位,取位置还好,在不用定位的情况下,计算一个div在页面的距离,就可以用到getBoundingClientRect()方法. getBoundingClientR ...

  2. element对象

    一.offset.client.scroll clientWidth,clientHeight,clientLeft,clientTop: offsetWidth,offsetHeight,offse ...

  3. jquery中的each用法以及js中的each方法实现实例

    each()方法能使DOM循环结构简洁,不容易出错.each()函数封装了十分强大的遍历功能,使用也很方便,它可以遍历一维数组.多维数组.DOM, JSON 等等在javaScript开发过程中使用$ ...

  4. canvas图形处理和进阶用法

    前面的话 上一篇博客介绍了canvas基础用法,本文将更进一步,介绍canvas的图形处理和进阶用法 图形变换 图形变换是指用数学方法调整所绘形状的物理属性,其实质是坐标变形.所有的变换都依赖于后台的 ...

  5. rem.js的用法及在浏览器端的适配

    首先介绍下自己,我是从后端转前端,对于前端的见识还不深望各位全当一个新手自述....... 随着移动设配的更新换代,市场上涌现了大量的非主流设备分辨率,比如华为手机...... 更新换代快的大前提下自 ...

  6. React Hooks用法大全

    前言 在 React 的世界中,有容器组件和 UI 组件之分,在 React Hooks 出现之前,UI 组件我们可以使用函数,无状态组件来展示 UI,而对于容器组件,函数组件就显得无能为力,我们依赖 ...

  7. EditText 基本用法

    title: EditText 基本用法 tags: EditText,编辑框,输入框 --- EditText介绍: EditText 在开发中也是经常用到的控件,也是一个比较必要的组件,可以说它是 ...

  8. jquery插件的用法之cookie 插件

    一.使用cookie 插件 插件官方网站下载地址:http://plugins.jquery.com/cookie/ cookie 插件的用法比较简单,直接粘贴下面代码示例: //生成一个cookie ...

  9. Java中的Socket的用法

                                   Java中的Socket的用法 Java中的Socket分为普通的Socket和NioSocket. 普通Socket的用法 Java中的 ...

随机推荐

  1. Blink: Chromium的新渲染引擎

    编自http://www.chromium.org/blink 关于blink Google Chrome/Chromium 从创始至今一直使用 WebKit(WebCore) 作为 HTML/CSS ...

  2. Oracle SQL Lesson (10) - 使用DDL语句创建和管理表

    数据库对象TableViewSequenceIndexSynonym 对象名称最长30个字符,不能与当前用户下其他对象重名.create table "select" as sel ...

  3. Django操作model时刻,一个错误:AttributeError:’ProgrammingError’ object has no attribute ‘__traceback__’

    原因:在Django项目下对应的应用以下的models.py配置的model(也就是class)没有创建成对应的表. 这是怎么回事呢? 首先,将models.py里面的model创建成相应的数据库表的 ...

  4. Ewebeditor最新漏洞和漏洞指数

    Ewebeditor最新漏洞和漏洞指数[收集] 来源:转载作者:佚名时间:2009-06-03 00:04:26 下面文章收集转载于网络:) 算是比較全面的ewebeditor编辑器的漏洞收集,如今的 ...

  5. C++ 哈希表 (hashtable) 用于保存简单的数据,及数据查找,数据删除

    /*hashtable.h*/ #include<iostream> #include <string> #include<vector> using namesp ...

  6. jvisualvm远程监控Tomcat

    网上已经有很多这方面的资料,但有些很杂乱,这里做了整理总结. 一.Java VisualVM 概述 对于使用命令行远程监控jvm 太麻烦 . 在jdk1.6 中 Oracle 提供了一个新的可视化的. ...

  7. JCombobox组合框效果实现(转)

    JCombobox是Swing中比较常用的控件,它显示一个项列表,扩展的是ListModel接口的模型,它的显示绘制器通过实现ListCellBenderer接口来绘制列表单元,下面介绍 ①普通应用例 ...

  8. 他们主动布局(autolayout)环境的图像编辑器

    hi,all: 在经过了一番犹豫之后.我决定将我自己做的这个小APP的源代码发布给大家: 其出发点是和大家一起学习iOS开发.仅供学习參考之用. 之前代码是托管与gitlab 上的,今天我将其pull ...

  9. 【C语言探索之旅】 第二部分第二课:进击的指针,C语言的王牌!

    内容简介 1.课程大纲 2.第二部分第二课: 进击的指针,C语言的王牌 3.第二部分第三课预告: 数组 课程大纲 我们的课程分为四大部分,每一个部分结束后都会有练习题,并会公布答案.还会带大家用C语言 ...

  10. 【SEO 决胜网络索引】 课程大纲及第一部分第一课:网络营销战略中的索引

    内容简介 1.课程大纲 2.第一部分第一课: 网络营销战略中的索引 3.第一部分第二课预告: 索引是什么 课程大纲 现在是网络为王的时代,人们越来越离不开互联网: SEO(Search Engine ...