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. 解决TabActivity中子页面不通过导航跳转到还有一个页面的问题

    问题:当你的导航在TabActivity中 而子页面的一个button须要切换到当中的某一个导航页面 转载请注明出处:http://blog.csdn.net/x605940745 demo下载地址: ...

  2. 间隔DP基础 POJ2955——Brackets

    取血怒.first blood,第一区间DP,这样第一次没有以某种方式在不知不觉中下降~~~ 题目尽管是鸟语.但还是非常赤裸裸的告诉我们要求最大的括号匹配数.DP走起~ dp[i][j]表示区间[i, ...

  3. FTP文件操作之创建目录

    前面几篇博客讲的都是对文件的操作,今天跟大家说一说对目录的操作,先让我们从创建目录开始说起吧. 创建目录很简单,首先创建一个ftp对象,然后将参数传进去,接着告诉ftp对象需要执行什么操作即可. 下面 ...

  4. Gradle构建多模块项目(转)

    废话不多说,直接进入主题. 1. 创建项目 首先创建项目,名称为 test: mkdir test && cd test gradle init 这时候的项目结构如下: ➜ test ...

  5. 问题:DataGrid该行并不总是很清楚验证错误(删除), 解决方案,如下面

    转载,收藏转载请注明出处http://blog.csdn.net/metal1/article/details/37568391 景象:于DataGrid进数据有误,行验证返回new Validati ...

  6. ZOJ 1203 Swordfish 旗鱼 最小生成树,Kruskal算法

    主题链接:problemId=203" target="_blank">ZOJ 1203 Swordfish 旗鱼 Swordfish Time Limit: 2 ...

  7. [LeetCode258] Add Digits 非负整数各位相加

    题目: Given a non-negative integer num, repeatedly add all its digits until the result has only one di ...

  8. Java SE学习之数组——匿名数组和不规则数组

    本文是学习网络上的文章时的总结以及自己的一点实践.感谢大家无私的分享. 近期偶然遇到了数组的问题,学习了匿名数组和不规则数组. 匿名数组适用于仅仅使用一次的情况:不规则数组适用是每行数据总数不确定的情 ...

  9. Android异步操作总结

    Android中常常会有一些操作比方网络请求,文件读写.数据库操作.比較耗时,我们须要将其放在非UI线程去处理.此时.我们须要处理任务前后UI的变化和交互.我们须要通过类似js中异步请求处理,这里总结 ...

  10. charles抓包

    charles使用教程指南 charles使用教程指南 前言 移动APP抓包 PC端抓包 查看模式 其他功能 问题汇总 1. 前言: Charles是一款抓包修改工具,相比起burp,charles具 ...