getBoundingClientRect可以获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置,最早在IE中实现,后其它浏览器均已实现。
但它在IE9,10中有个bug,当出现垂直滚动条时,获取top总为0。其它浏览器则能正常获取。代码如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>IE9/10 getBoundingClientRect bug</title> </head> <body style="height:3000px"> <p style="margin-top:400px"> <label>Top:<input id="_bound" type="text"/></label> </p> <script> var el = document.getElementById('_bound') document.onclick = function() { var rect = document.documentElement.getBoundingClientRect() el.value = rect.top } </script> </body> </html>
1. 把body设的较高,以出现垂直滚动条
2. 鼠标向下拖动滚动条大概200px
3. 点击页面任意处,通过getBoundingClientRect获取input元素的top
Firefox/Chrome/Safari/IE11:-212~278
IE9/10:0
相关:
http://msdn.microsoft.com/en-us/library/ms536433(VS.85).aspx
http://developer.mozilla.org/en/docs/DOM:element.getBoundingClientRect
http://ejohn.org/blog/getboundingclientrect-is-awesome/
相关推荐
js getBoundingClientRect() 来获取页面元素的位置.docx
1、getBoundingClientRect的作用 getBoundingClientRect用于获取某个html元素相对于视窗的位置集合。 执行 object.getBoundingClientRect();会得到元素的top、right、bottom、left、width、height属性,这些属性以一...
getBoundingClientRect
请使用 element.getBoundingClientRect()。 经本人测试,确实是Firefox在含flash的网页上提示,还不知道原因,也没找到解决办法。 Firefox版本:3.0.3 Flash: 10.0 html页面代码: 代码如下:<html> <body&...
主要介绍getBoundingClientRect的基本属性,以及具体的使用场景和一些需要注意的问题。 getBoundingClientRect Element.getBoundingClientRect() 含义: 方法返回元素的大小及其相对于视口的位置。 值: 返回值...
js getBoundingClientRect使用方法详解.docx
this.$refs[‘通过设置ref获取到的dom元素’].getBoundingClientRect(); //示例: 获取元素距离顶部的距离 this.$refs.journalUpward.getBoundingClientRect().top 以上这篇vue获取元素宽、高、距离左边距离,右,上...
getBoundingClientRect() //x\y:元素的左上角和父元素左上角的距离 //width/height:边框 + 内边距 + 内容框 //top:元素的上边界和父元素上边界的距离 //left:元素的左边界和父元素左边界的距离 //right:元素的右边界...
所以,网页元素的相对位置就是 var X= this.getBoundingClientRect().left; var Y =this.getBoundingClientRect().top; 再加上滚动距离,就可以得到绝对位置 var X= this.getBoundingClientRect().left+document....
一般来说透明的属性值是"transparent",但在chrome里却是"rgba(0, 0, 0, 0)",所以用了一个属性来保存透明值: this._transparent = isChrome ? "rgba(0, 0, 0, 0)" : "transparent"; 并在GetBgColor获取背景色...
js中getBoundingClientRect( )方法案例详解.docx
js中getBoundingClientRect的作用及兼容方案详解.docx
用于 getBoundingClientRect 的 jQuery 插件助手 安装 $ bower install jquery.bounds --save 用法 $ ( 'div.mynode' ) . bounds ( ) ; 这将返回一个具有以下属性的对象: { top : 100 , left : 100 , ...
document.documentElement.getBoundingClientRect下面这是MSDN的解释: Syntax oRect = object.getBoundingClientRect()Return Value Returns a TextRectangle object. Each rectangle has four integer properties ...
该方法已经不再是IE Only了,FF3.0+和Opera9.5+已经支持了该方法,可以说在获得页面元素位置上效率能有很大的提高,在以前版本的Opera和Firefox中必须通过循环来获得元素在页面中的绝对位置。
本文介绍这种组件的实现思路,并提供一个同时支持将sticky元素固定在顶部或底部的具体实现,由于这种组件在网站中非常常见,所以有必要掌握它的实现方式,以便在有需要的时候基于它的思路写出功能更多的组件出来