client,offset,scroll系列

时间 2019-12-14
标签 client offset scroll 系列繁體版
原文原文链接
client(客户端),offset(偏移),scroll(滚动)1.client系列    clientTop 内容区域到边框顶部的距离 ，说白了，就是边框的高度    clientLeft 内容区域到边框左部的距离，说白了,就是边框的宽度    clientWidth 内容区域+左右padding   可视宽度    clientHeight 内容区域+ 上下padding   可视高度    例:        <head>            <meta charset="UTF-8">            <title>Title</title>            <style>                .box{                    width: 100px;                    height: 100px;                    border: 10px solid red;                    padding: 50px;                }            </style>        </head>        <body>        <div class="box">aaa</div>        <script>            oBox=document.getElementsByClassName('box')[0];            console.log(oBox.clientTop);//10            console.log(oBox.clientLeft);//10            console.log(oBox.clientWidth);//200            console.log(oBox.clientHeight)//200        </script>        </body>2.屏幕的可视区域<script type="text/javascript">    // 屏幕的可视区域    window.onload = function(){        // document.documentElement 获取的是html标签        console.log(document.documentElement.clientWidth);        console.log(document.documentElement.clientHeight);        // 窗口大小发生变化时，会调用此方法        window.onresize = function(){            console.log(document.documentElement.clientWidth);            console.log(document.documentElement.clientHeight);        }    }</script>3.offset系列    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            *{                padding: 0;                margin: 0;            }        </style>    </head>    <body style="height: 2000px">        <div>            <div class="wrap" style=" width: 300px;height: 300px;position: relative">                <div id="box" style="width: 200px;height: 200px;border: 5px solid red;position: absolute;top:50px;left: 30px;">                </div>            </div>        </div>    </body>    <script type="text/javascript">        window.onload = function(){            var box = document.getElementById('box');            /*             offsetWidth占位宽  内容+padding+border             offsetHeight占位高             * offsetTop: 若是盒子没有设置定位 到body的顶部的距离,若是盒子设置定位，那么是以父辈为基准的top值             * offsetLeft： 若是盒子没有设置定位 到body的左部的距离，若是盒子设置定位，那么是以父辈为基准的left值             * */            console.log(box.offsetTop);            console.log(box.offsetLeft);            console.log(box.offsetWidth);            console.log(box.offsetHeight);        }    </script>4.scroll系列    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            *{padding: 0;margin: 0;}        </style>    </head>    <body style="width: 2000px;height: 2000px;">        <div style="height: 200px;"></div>        <div style="height: 200px;"></div>        <div style="height: 200px;"></div>        <div style="height: 200px;"></div>        <div style="height: 200px;"></div>        <div id = 'scroll' style="width: 200px;height: 200px;border: 1px solid red;overflow: auto;padding: 10px;margin: 5px 0px 0px 0px;">            <p>大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅                度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发                热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大                幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度                发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热                大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅                度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发                热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大            </p>        </div>    </body>    <script type="text/javascript">        window.onload = function(){            //实施监听滚动事件            window.onscroll = function(){               console.log(1111);               //页面向上卷起的高度               console.log('上'+document.documentElement.scrollTop);               //页面左侧卷起的高度               console.log('左'+document.documentElement.scrollLeft);               //宽度 包括内容 padding 边框               console.log('宽'+document.documentElement.scrollWidth);               //高度 包括内容 padding 边框               console.log('高'+document.documentElement.scrollHeight)            };                // 页面中的其余部分也能够作滚动监听事件            var s = document.getElementById('scroll');            s.onscroll = function(){    //        scrollHeight : 内容的高度+padding 边框                console.log('上'+s.scrollTop);                console.log('左'+s.scrollLeft);                console.log('宽'+s.scrollWidth);                console.log('高'+s.scrollHeight);            }        }    </script>5.固定导航栏实例:    <head>        <meta charset="UTF-8">        <title>Title</title>        <style>            *{                margin: 0;                padding : 0;            }            .top{                width: 100%;                height: 80px;                            }            .content{                width: 100%;                height: 1000px;                background-color: gold;                /*position: relative;*/            }            .input{                width: 350px;                height: 60px;                background-color: #fff;                position: absolute;                top: 150px;                left: 40%;            }            .down{                position: fixed;                top: 0;                left: 0;                width: 100%;                height: 100px;                z-index: 1000;                background-color: saddlebrown;                display: none;            }        </style>    </head>    <body>    <div class="top"></div>    <div class="content">        <div class="input"></div>    </div>    <div class="down"></div>    <script>        window.onload=function(){            oInput=document.getElementsByClassName('input')[0];            oDowm=document.getElementsByClassName('down')[0];            fromtop=oInput.offsetTop;            console.log(fromtop);            window.onscroll=function(){                var othertop=document.documentElement.scrollTop;                // console.log(othertop);                if(othertop>=fromtop){                    oDowm.style.display='block';                }else{                    oDowm.style.display='none';                }            };        }    </script>    </body>