document.documentElement.getBoundingClientRect
下面这是MSDN的解释:
Syntax
oRect
= object
.getBoundingClientRect(
)
Return Value
Returns a TextRectangle
object. Each rectangle has four integer properties (top, left, right, and bottom) that represent a coordinate of the rectangle, in pixels.
Remarks
This method retrieves an object that exposes the left, top, right, and bottom coordinates of the union of rectangles relative to the client's upper-left corner. In Microsoft Internet Explorer 5, the window's upper-left is at 2,2 (pixels) with respect to the true client.
还是实际解释下,该方法获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置。也不好理解,下面用图说明下。
该方法已经不再是IE Only了,FF3.0+和Opera9.5+已经支持了该方法,可以说在获得页面元素位置上效率能有很大的提高,在以前版本的Opera和Firefox中必须通过循环来获得元素在页面中的绝对位置。
下面的代码举了个简单的例子,可以滚动滚动条之后点红色区域看各个值的变化。
Code
<!--
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
--><!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
<
head
>
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=utf-8"
/>
<
title
>
Demo
</
title
>
</
head
>
<
body
style
="width:2000px; height:1000px;"
>
<
div
id
="demo"
style
="position:absolute; left:518px; right:100px; width:500px; height:500px; background:#CC0000; top: 114px;"
>
Demo为了方便就直接用绝对定位的元素
</
div
>
</
body
>
</
html
>
<
script
>
document.getElementById(
'
demo
'
).onclick
=
function
(){
if
(document.documentElement.getBoundingClientRect) {
alert(
"
left:
"
+
this
.getBoundingClientRect().left)
alert(
"
top:
"
+
this
.getBoundingClientRect().top)
alert(
"
right:
"
+
this
.getBoundingClientRect().right)
alert(
"
bottom:
"
+
this
.getBoundingClientRect().bottom)
var
X=
this
.getBoundingClientRect().left
+
document.documentElement.scrollLeft;
var
Y
=
this
.getBoundingClientRect().top
+
document.documentElement.scrollTop;
alert(
"
Demo的位置是X:
"
+X
+
"
;Y:
"
+
Y)
}
}
</
script
>
有了这个方法,获取页面元素的位置就简单多了,
var
X
=
this
.getBoundingClientRect().left
+
document.documentElement.scrollLeft;
var
Y
=
this
.getBoundingClientRect().top
+
document.documentElement.scrollTop;
- 大小: 17.1 KB
- 大小: 14.5 KB
分享到:
相关推荐
js getBoundingClientRect() 来获取页面元素的位置.docx
1、getBoundingClientRect的作用 getBoundingClientRect用于获取某个html元素相对于视窗的位置集合。 执行 object.getBoundingClientRect();会得到元素的top、right、bottom、left、width、height属性,这些属性以一...
getBoundingClientRect
js getBoundingClientRect使用方法详解.docx
主要介绍getBoundingClientRect的基本属性,以及具体的使用场景和一些需要注意的问题。 getBoundingClientRect Element.getBoundingClientRect() 含义: 方法返回元素的大小及其相对于视口的位置。 值: 返回值...
js中getBoundingClientRect( )方法案例详解.docx
js中getBoundingClientRect的作用及兼容方案详解.docx
所以,网页元素的相对位置就是 var X= this.getBoundingClientRect().left; var Y =this.getBoundingClientRect().top; 再加上滚动距离,就可以得到绝对位置 var X= this.getBoundingClientRect().left+document....
请使用 element.getBoundingClientRect()。 经本人测试,确实是Firefox在含flash的网页上提示,还不知道原因,也没找到解决办法。 Firefox版本:3.0.3 Flash: 10.0 html页面代码: 代码如下:<html> <body&...
用于 getBoundingClientRect 的 jQuery 插件助手 安装 $ bower install jquery.bounds --save 用法 $ ( 'div.mynode' ) . bounds ( ) ; 这将返回一个具有以下属性的对象: { top : 100 , left : 100 , ...
响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 例5-3 第5章 HTML5 画布 getBoundingClientRect()
document.documentElement.getBoundingClientRect下面这是MSDN的解释: Syntax oRect = object.getBoundingClientRect()Return Value Returns a TextRectangle object. Each rectangle has four integer properties ...
本文介绍这种组件的实现思路,并提供一个同时支持将sticky元素固定在顶部或底部的具体实现,由于这种组件在网站中非常常见,所以有必要掌握它的实现方式,以便在有需要的时候基于它的思路写出功能更多的组件出来
该方法已经不再是IE Only了,FF3.0+和Opera9.5+已经支持了该方法,可以说在获得页面元素位置上效率能有很大的提高,在以前版本的Opera和Firefox中必须通过循环来获得元素在页面中的绝对位置。
如何知道某个元素在视口中是否可见。 点击下面的链接查看博客文章