getBoundingClientRect的用法
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的用法的更多相关文章
- js中getBoundingClientRect()的用法介绍
平时经常获取一个div的位置,用了定位,取位置还好,在不用定位的情况下,计算一个div在页面的距离,就可以用到getBoundingClientRect()方法. getBoundingClientR ...
- element对象
一.offset.client.scroll clientWidth,clientHeight,clientLeft,clientTop: offsetWidth,offsetHeight,offse ...
- jquery中的each用法以及js中的each方法实现实例
each()方法能使DOM循环结构简洁,不容易出错.each()函数封装了十分强大的遍历功能,使用也很方便,它可以遍历一维数组.多维数组.DOM, JSON 等等在javaScript开发过程中使用$ ...
- canvas图形处理和进阶用法
前面的话 上一篇博客介绍了canvas基础用法,本文将更进一步,介绍canvas的图形处理和进阶用法 图形变换 图形变换是指用数学方法调整所绘形状的物理属性,其实质是坐标变形.所有的变换都依赖于后台的 ...
- rem.js的用法及在浏览器端的适配
首先介绍下自己,我是从后端转前端,对于前端的见识还不深望各位全当一个新手自述....... 随着移动设配的更新换代,市场上涌现了大量的非主流设备分辨率,比如华为手机...... 更新换代快的大前提下自 ...
- React Hooks用法大全
前言 在 React 的世界中,有容器组件和 UI 组件之分,在 React Hooks 出现之前,UI 组件我们可以使用函数,无状态组件来展示 UI,而对于容器组件,函数组件就显得无能为力,我们依赖 ...
- EditText 基本用法
title: EditText 基本用法 tags: EditText,编辑框,输入框 --- EditText介绍: EditText 在开发中也是经常用到的控件,也是一个比较必要的组件,可以说它是 ...
- jquery插件的用法之cookie 插件
一.使用cookie 插件 插件官方网站下载地址:http://plugins.jquery.com/cookie/ cookie 插件的用法比较简单,直接粘贴下面代码示例: //生成一个cookie ...
- Java中的Socket的用法
Java中的Socket的用法 Java中的Socket分为普通的Socket和NioSocket. 普通Socket的用法 Java中的 ...
随机推荐
- Java EE (3) -- Java EE 6 Web Services Developer Certified Expert(1z0-897)
Create an SOAP web service in a servlet container Create a RESTful web service in a servlet containe ...
- 比較Swift与HDFS话Ceph本质(by quqi99)
作者:张华 发表于:2014-06-21版权声明:能够随意转载,转载时请务必以超链接形式标明文章原始出处和作者信息及本版权声明 (http://blog.csdn.net/quqi99 ) 作者将又 ...
- windbg更改cmd的token提升其特权
采用windbg 调试xp. 执行cmd.whoami检查权限如下面: 以下要做的就是把cmd.exe 的token值用system的token替换. 1. Ctrl + break ,windbg ...
- Android开发框架SmartAndroid2.0 强劲框架
SmartAndroid 是一个功能强劲的 Android 框架,作为一个简单而"优雅"的工具库包,它能够为 Android 开发人员建立功能完好的Android 应用程序. 经过 ...
- 返璞归真 asp.net mvc (2) - 路由(System.Web.Routing)
原文:返璞归真 asp.net mvc (2) - 路由(System.Web.Routing) [索引页] [源码下载] 返璞归真 asp.net mvc (2) - 路由(System.Web.R ...
- 《编程简介(Java) ·10.3递归思想》
<编程简介(Java) ·10.3递归思想> 10.3.1 递归的概念 以两种方式的人:男人和女人:算法是两种:递归迭代/通知: 递归方法用自己的较简单的情形定义自己. 在数学和计算机科学 ...
- SQL Server 版本号汇总
通过SSMS连接Sql servr,查看实例的版本就能知道当前SQL Server的版本号了. RTM (no SP) SP1 SP2 SP3 SP4 SQL Server 2014 c ...
- Swift1_关闭
// main.swift // swift1_关闭 // Created by beyond on 15/6/12. // Copyright (c) 2015年 beyond.com All ri ...
- 矩阵求逆c++达到
高斯消元法能够用来找出一个可逆矩阵的逆矩阵.设A 为一个N * N的矩阵,其逆矩阵可被两个分块矩阵表示出来.将一个N * N单位矩阵 放在A 的右手边,形成一个N * 2N的分块矩阵B = [A,I] ...
- windows下VC界面 DIY系列1----写给想要写界面的C++程序猿的话
非常早就想写关于C++ UI开发的一系列博文,博客专栏刚审核通过,就立即開始刷博文,不能辜负自己的一番热血,我并非写界面的高手,仅仅想通过写博文提高我自己的技术积累,也顺便帮助大家解决界面开发的瓶颈. ...