码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-03-05 12:49:41      阅读:200      评论:0      收藏:0      [点我收藏+]

标签:Fix   数值   fun   span   onclick   height   滚动   tom   offset   

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

 

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

标签:Fix   数值   fun   span   onclick   height   滚动   tom   offset   

原文地址:https://www.cnblogs.com/zhangjiaqi123/p/10475942.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!