DOM基本操作4

查看元素的几何尺寸
domEle.getBoundingClientRect();
兼容性很好
该方法返回一个对象，对象里面有left,top,right,bottom等属性。left和top代表该元素左上角的X和Y坐标，right和bottom代表元素右下角的X和Y坐标
height和width属性老版本IE并未实现
返回的结果并不是“实时的”（静态的）

查看元素的尺寸
dom.offsetWidth，dom.offsetHeight

查看元素的位置
dom.offsetLeft, dom.offsetTop

对于无定位父级的元素，返回相对文档的坐标。对于有定位父级的元素，返回相对于最近的有定位的父级的坐标。

dom.offsetParent
返回最近的有定位的父级，如无，返回body, body.offsetParent 返回null

让滚动条滚动
window上有三个方法
scroll(),scrollTo(),scrollBy();
前面两个作用一样。
三个方法功能类似，用法都是将x,y坐标传入。即实现让滚动轮滚动到当前位置。
区别：scrollBy()会在之前的数据基础之上做累加。
eg：利用scrollBy() 快速阅读的功能

代码：
在html中：

<div style="width: 200px;height:200px;background-color: yellow;
position: fixed;top: 900px; right: 100px;border-radius: 50%;color: black;
font-size: 60px;font-weight:bold;line-height: 200px;text-align: center;">Start</div>

<div style="width: 200px;height:200px;background-color: green;
position: fixed;top: 1150px; right: 100px;border-radius: 50%;color: black;
font-size: 60px;font-weight:bold;line-height: 200px;text-align: center;">Stop</div>

在js中：

 var start = document.getElementsByTagName('div')[0];
	var stop = document.getElementsByTagName('div')[1];
	var key = true;
	var timer;
	start.onclick = function(){
		if(key){
			timer = setInterval(function(){
                  window.scrollBy(0,10);
			},100);
			key = false;
		}
	}
	stop.onclick = function(){
		clearInterval(timer);
		key = true;
	}