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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。