getBoundingClientRect说明
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说明的更多相关文章
- 盒子 offsetLeft、offsetTop、offsetWidth、getBoundingClientRect等属性解释
offsetLeft 获取的是忽略 margin 当前元素距离上一级父节点(有没有设置position,有的话依据父节点,没有的话依据页面最左端这时候不管滚动条移到哪) 当前元素向左的位置 记住它会将 ...
- JavaScript中getBoundingClientRect()方法详解
获取浏览器滚动的高度: scrollTop=document.documentElement.scrollTop || document.body.scrollTop getBoundingClien ...
- js中getBoundingClientRect的作用及兼容方案
js中getBoundingClientRect的作用及兼容方案 1.getBoundingClientRect的作用 getBoundingClientRect用于获取某个html元素相对于视窗的位 ...
- 利用getBoundingClientRect方法实现简洁的sticky组件
补充于2016-03-20: 本文实现有不足,不完美的地方,请在了解本文相关内容后,移步阅读<sticky组件的改进实现>了解更佳的实现. sticky组件,通常应用于导航条或者工具栏,当 ...
- CSSOM之getboundingclientrect和getclientrects
TextRectangle 对于文本对象,W3C提供了一个 TextRectangle 对象,这个对象是对文本区域的一个解释. 对于 i,span,em等display 是inline的标签,在书写文 ...
- getBoundingClientRect在IE9/10里的bug
getBoundingClientRect可以获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置,最早在IE中实现,后其它浏览器均已实现. 但它在IE9,10中有个bug,当出现垂直滚动条时, ...
- getBoundingClientRect详解
getBoundingClientRect获取的left和top始终是该元素相对于页面原点坐标的位置,当它大于原点坐标则为正数,等于原点坐标为零,小于为负数.
- getBoundingClientRect() 来获取页面元素的位置
getBoundingClientRect() 来获取页面元素的位置 document.documentElement.getBoundingClientRect 下面这是MSDN的解释: Syn ...
- getBoundingClientRect()兼容性处理
getBoundingClientRect() 这个方法返回一个矩形对象,包含四个属性:left.top.right和bottom.分别表示元素各边与页面上边和左边的距离. var box=docum ...
- .getBoundingClientRect()
.getBoundingClientRect() 该方法获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置,他返回的是一个对象,即Object,该对象有4个属性:top,left,right, ...
随机推荐
- Oracle中ROWID详解
oracle数据库的表中的每一行数据都有一个唯一的标识符,或者称为rowid,在oracle内部通常就是使用它来访问数据的.rowid需要 10个字节的存储空间,并用18个字符来显示.该值表明了该行在 ...
- Aho-Corasick自动机
在模式匹配问题中,如果模板有很多个,KMP算法就不太适合了.因为每次查找一个模板.都要遍历整个文本串.可不可以只遍历一次文本串呢?可以,方法是把所有模板组成一个大的状态转移图(称为$Aho-Coras ...
- 无旋Treap【模板】P3369
题目 详情见链接. 代码 #include<cstdio> #include<iostream> #define outd(x) printf("%d\n" ...
- HTML之基本语法(段落标签、标题标签、空格标签、换行标签、图片标签和图片的基本属性)
一.HTML标签 所谓的HTML的标签就是发明者认为定义好的一些单词,就相当于我们汉语中的字 二.HTML的语法 语法就是用来定义这些“字”应该如何解析或者书写的规则 三.常见标签及基本语法 1.人为 ...
- 从输入url到页面加载完成发生了什么详解
这是一道经典的面试题,这道题没有一个标准的答案,它涉及很多的知识点,面试官会通过这道题了解你对哪一方面的知识比较擅长,然后继续追问看看你的掌握程度.当然我写的这些也只是我的一些简单的理解,从前端的角度 ...
- javaweb基础(4)_http协议
一.什么是HTTP协议 HTTP是hypertext transfer protocol(超文本传输协议)的简写,它是TCP/IP协议的一个应用层协议,用于定义WEB浏览器与WEB服务器之间交换数据的 ...
- Silverlight日记:字符串装换成Path对象
一,需要动态绑定Path <UserControl x:Class="Secom.Emx2.SL.Common.Controls.EleSafe.Ele.Line" xmln ...
- -安装与配置 FTP 服务器
我们经常会使用 FTP,把本地电脑上的文件上传到服务器上,或者把服务器上的文件下载到自己的电脑里面.FTP 有服务端和客户端,FTP 的服务端提供了这种传输文件的服务,FTP 的客户端提供了传输文件的 ...
- Spring XML配置文件无法自动提示 eclipse中XML配置文件open with打开方式选择 XML Editor:注意它的编辑方式也是有两种的design和source
双击XML配置文件,如果打开方式不正确 则如下图: 都是灰色显示,不会有自动提示,也不会有颜色标注 右击XML配置文件,选择打开方式为XML Editor,则会有颜色标注 如果此时没有自动提示 则要手 ...
- ccf 201712-3 Crontab(Python实现)
一.原题 问题描述 试题编号: 201712-3 试题名称: Crontab 时间限制: 10.0s 内存限制: 256.0MB 问题描述: 样例输入 3 201711170032 201711222 ...