窗口属性 和DOM 元素尺寸位置 及习题加强

Posted 2021-02-12 zhangjiaqi123

可视窗口大小；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>