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() 方法的语法为：element.getBoundingClientRect()，返回一个 TextRectangle 对象，该对象有四个整数属性（top、left、right 和 bottom），这些属性表示元素在客户端窗口中的坐标值，以...
注意对于 `clientTop` 和 `clientLeft` 在 IE6 和 IE7 中始终为 2 像素，而在其他现代浏览器中则为 0。 #### 三、浏览器兼容性问题 `getBoundingClientRect` 方法在不同浏览器中的表现存在差异： 1. **IE6 和 IE7...
关于浏览器兼容性，`getBoundingClientRect` 方法在Internet Explorer 5以上版本就已支持，但在IE6和IE7中存在一些小问题。这两个老版本的浏览器中，`left` 和 `top` 属性会比实际值少2像素，并且不提供 `width` 和 ...
例如，在IE浏览器中，如果不添加DOCTYPE声明，那么getBoundingClientRect方法将返回错误的结果，而添加DOCTYPE声明后，getBoundingClientRect方法将正确地返回元素的矩形边界信息。 在FF、Chrome、Maxthon浏览器中...
在本文中，我们将深入探讨如何解决KindEditor在Internet Explorer 11（IE11）下遇到的弹出框显示问题，这是一个典型的浏览器兼容性问题。首先，我们需要了解问题的根源，然后逐步分析代码以找到解决方案。 ...
在使用 getBoundingClientRect 方法时，需要注意以下几点： 1. 该方法返回的属性值是相对于视口的，而不是相对于页面的左上角。因此，如果需要获取相对于整个网页左上角定位的属性值，需要加上当前的滚动位置。 2. ...
this.$refs[‘通过设置ref获取到的dom元素’].getBoundingClientRect(); //示例: 获取元素距离顶部的距离 this.$refs.journalUpward.getBoundingClientRect().top 以上这篇vue获取元素宽、高、距离左边距离,右,上...
- `getBoundingClientRect`的值会实时反映滚动操作，这意味着在用户滚动页面时，`top`和`left`的值会更新以保持相对于视口的位置。 - 要获取元素相对于整个文档的位置，需要将`top`和`left`加上当前的滚动位置（`...
请使用 element.getBoundingClientRect()。 经本人测试，确实是Firefox在含flash的网页上提示，还不知道原因，也没找到解决办法。 Firefox版本：3.0.3 Flash: 10.0 html页面代码： 代码如下:<html> <body&...
由于不同浏览器对于滚动条处理的不同，`getBoundingClientRect()`方法在某些情况下可能需要额外的处理以确保兼容性。例如，在某些浏览器中，当页面有滚动条时，`getBoundingClientRect()`返回的位置可能会受到影响。...
在`handleScroll`函数中，我们可以获取到目标元素（target元素）和sticky元素的`getBoundingClientRect`对象，从中提取出需要的坐标信息。 ```javascript function handleScroll() { const targetRect = target...
`getBoundingClientRect()` 是JavaScript中一个非常实用的DOM方法，它用于获取元素在视口中的边界信息，包括元素的顶部、底部、左侧和右侧相对于视口的位置。这个方法在现代浏览器中广泛支持，包括IE5以上版本、Fire...
getBoundingClientRect() //x\y:元素的左上角和父元素左上角的距离 //width/height:边框 + 内边距 + 内容框 //top:元素的上边界和父元素上边界的距离 //left:元素的左边界和父元素左边界的距离 //right:元素的右边界...
在JavaScript的世界里，`getBoundingClientRect()` 是一个非常实用的DOM API，它可以帮助开发者获取到一个元素在浏览器视口中的几何信息。这个API返回一个对象，其中包含了元素的top、right、bottom、left、width和...
所以，网页元素的相对位置就是 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获取背景色...
本文将详细讲解如何在不同的浏览器环境下，包括IE和Firefox，获取鼠标的坐标位置，并提供相应的源码示例。 首先，我们需要理解在浏览器环境中，鼠标的坐标通常有两种表示方式：页面坐标和元素坐标。页面坐标是指...