一、getBoundingClientRect()
getBoundingClientRect()：返回会一个矩形对象，包含4 个属性：left、top、right和bottom。- 这些属性给出了元素在页面中相对于视口的位置。
-
在
IE8及更早版本中，会返回(2,2)，而在其他浏览器中会返回(0,0)。 - 实例1：只有一层父元素
<div id="outer" style="width: 100px; height: 100px; position: relative; margin: 20px; padding: 20px; left: 10px; top: 10px; background: red">
<div id="inner" style="width: 50px; height: 50px; overflow: scroll; border: 10px solid; padding: 10px; margin: 10px;position: absolute; top: 100px; left: 10px; background: blue"></div>
</div>
<script>
var outer = document.getElementById('outer');
console.log(outer.getBoundingClientRect());
var inner = document.getElementById('inner');
console.log(inner.getBoundingClientRect());
</script>
- 效果图：
outer
inner
- 从图中可以得出以下结论：
bottom=top+heightright=left+widthx=lefty=right