查看元素的几何尺寸 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; }