13 client&offset&scroll

client&offset&scroll

  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>

 

posted @ 2019-07-02 09:22  毛斯钢  阅读(168)  评论(0)  编辑  收藏  举报