窗口属性 和DOM 元素尺寸位置 及习题加强
2019-03-05 12:20 HHFFZ 阅读(215) 评论(0) 编辑 收藏 举报可视窗口大小;window.innerWidth;/innerHeight
窗口滚动条距离
window.pageXOffset;pageYoggset
dom(元素).offsetWidth//求可视元素的宽高;
dom.offsetHeigth//
dom.offsetLeft//返回相对于第一个有定位的父级的距离
dom.offsetTop//
window.scroll()/scrollTo() //跳动到传入数值的地方;
scrollBy() //在之前的基础做累加;
小说阅读器
<div style="width:100px;height:100px;background-color:orange; color:green;font-size:40px;line-height:100px;text-align:center;position: fixed;bottom:200px;right:50px; border-radius:50%; opacity: 0.5;">开始</div> <div style="width:100px;height:100px;background-color:red; color:#fff;font-size:20px;text-align:center;position: fixed;bottom:100px;right:50px; border-radius:50%; opacity: 0.5;">暂停</div> <script type="text/javascript"> var star =document.getElementsByTagName('div')[1]; var stop=document.getElementsByTagName('div')[2]; var timer=0; var kay=true; star.onclick=function(){ if(kay){ timer=setInterval(function(){ window.scrollBy(0,10) },100); kay=flase; } } stop.onclick=function() { clearInterval(timer); kay=true; } </script>