13 client&offset&scroll

時間 2019-11-11
標籤 client&offset&scroll client offset scroll 简体版
原文原文鏈接
client&offset&scrolljavascript
  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta http-equiv="X-U-Compatible" content="IE-edge">
  6     <meta name="viewport" content="width=device-width,initial-scale=1">
  7     <title>client&offset&scroll</title>
  8     <style type="text/css">
  9         #box{
 10             width: 100px;
 11             height: 100px;
 12             position: absolute;
 13             border: 10px solid red;
 14             /*margin: 10px 0px 0px 0px;*/
 15             padding: 40px;
 16         }
 17         .wrap{
 18             width: 300px;
 19             height: 300px;
 20             background-color: green;
 21             position:relative;
 22             top: 5px;
 23             margin-left: 300px;
 24         }
 25         #box2{
 26             width: 200px;
 27             height: 200px;
 28             border: 5px solid red;
 29             position: absolute;
 30             top: 100px;
 31             left: 50px;
 32             padding:2px;
 33         }
 34         </style>
 35 </head>
 36 <body style="width: 2000px;height: 2000px;padding:10px;border:1px solid red;">
 37     <div class="box" id="box">
 38         成年人的世界沒有容易二字
 39     </div>
 40     <div>
 41         <div class="wrap"><div id="box2">有些人活着就已經不遺餘力！</div></div>
 42     </div>
 43     <div style="height: 100px;background-color: red;"></div>
 44     <div style="height: 100px;background-color: green;"></div>
 45     <div style="height: 100px;background-color: yellow;"></div>
 46     <div style="height: 100px;background-color: blue;"></div>
 47     <div style="height: 100px;background-color: gray;"></div>
 48     <div id='scroll' style="width: 200px;height: 200px;border: 1px solid red;overflow: auto;padding: 10px;margin: 5px 0px 0px 0px;">
 49         <p>成年人的世界沒有容易二字,有些人活着就已經不遺餘力！</p>
 50         <p>成年人的世界沒有容易二字,有些人活着就已經不遺餘力！</p>
 51         <p>成年人的世界沒有容易二字,有些人活着就已經不遺餘力！</p>
 52         <p>成年人的世界沒有容易二字,有些人活着就已經不遺餘力！</p>
 53         <p>成年人的世界沒有容易二字,有些人活着就已經不遺餘力！</p>
 54     </div>
 55 </body>
 56 <script type="text/javascript">
 57     function $(id) {
 58         return document.getElementById(id);
 59     }
 60     //  client
 61     console.log($('box').clientTop); //clientTop 內容區域到邊框頂部的距離 ，說白了就是邊框border的高度
 62     console.log($('box').clientLeft);//clientLeft 內容區域到邊框左部的距離，說白了就是邊框border的寬度
 63     console.log($('box').clientHeight);//clientWidth 內容區域+左右padding   可視寬度
 64     console.log($('box').clientWidth);//clientHeight 內容區域+ 上下padding   可視高度
 65     //  屏幕的可視區域
 66     window.onload = function () {
 67         window.onresize = function () {
 68             // document.documentElement 獲取的是html標籤
 69             // console.log(document.documentElement.clientWidth);
 70             // console.log(document.documentElement.clientHeight);
 71             // // 窗口大小發生變化時，會觸發此方法
 72             console.log(document.documentElement.clientHeight);
 73             console.log(document.documentElement.clientWidth);
 74         }
 75     };
 76 
 77     //  offset
 78     window.onload = function () {
 79         console.log($('box2').offsetHeight);  //  佔位高  內容+padding+border
 80         console.log($('box2').offsetWidth);  // 佔位寬  內容+padding+border
 81         // 若是盒子沒有設置定位 到body的頂部的距離,若是盒子設置定位，那麼是以父輩爲基準的top值
 82         console.log($('box2').offsetTop);
 83         // 若是盒子沒有設置定位 到body的左部的距離，若是盒子設置定位，那麼是以父輩爲基準的left值
 84         console.log($('box2').offsetLeft);
 85     }
 86 
 87     //scroll
 88     window.onscroll = function () {
 89         console.log('上' + document.documentElement.scrollTop);// 頁面捲起的高度
 90         console.log('左' + document.documentElement.scrollLeft);// 頁面捲起的寬度
 91         console.log('高' + document.documentElement.scrollHeight);// 包含 border + height + padding
 92         console.log('寬' + document.documentElement.scrollWidth);// 包含 border + width + padding
 93     }
 94 
 95     $('scroll').onscroll = function () {
 96         console.log('上'+$('scroll').scrollTop);
 97         console.log('左'+$('scroll').scrollLeft);
 98         console.log('寬'+$('scroll').scrollWidth);
 99         console.log('高'+$('scroll').scrollHeight)  //scrollHeight : 內容的高度+padding
100     }
101 
102 </script>
103 </html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。