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=" 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=" 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>