先看盒子模型
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>视窗宽高</title> 5 </head> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 .box1{ 12 width: 200px; 13 height: 200px; 14 background: #007d65; 15 margin: 20px 50px; 16 padding: 30px 60px; 17 border: 30px solid #7fb80e; 18 position: absolute; 19 top: 100px; 20 left: 200px; 21 overflow: scroll; 22 } 23 24 </style> 25 <body> 26 <div class="box1"> 27 <p>这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框这里是内容框</p> 28 </div> 29 </body> 30 <script type="text/javascript"> 31 box1=document.getElementsByTagName('div')[0]; 32 console.log('offsetTop='+box1.offsetTop); //120 33 console.log('offsetLeft='+box1.offsetLeft); //250 34 console.log('offsetWidth='+box1.offsetWidth); //380 35 console.log('offsetHeight='+box1.offsetHeight); //320 36 console.log('clientWidth='+box1.clientWidth); //303 37 console.log('clientHeight='+box1.clientHeight); //243 38 console.log('scrollWidth='+box1.scrollWidth); //303 39 console.log('scrollHeight='+box1.scrollHeight); //354 40 </script> 41 </html>
有滚动条,滚动条在padding内,占用了padding,paading不够填充,便占用content区域,所以content大小为
width：200(CSS)-17(滚动条)
height：200(CSS)-17(滚动条)
- offsetTop: div上外border线到视窗顶的距离
- offsetLeft: div左外border线到视窗左的距离
- offsetWidth=borderLeft+paddingLeft+cssWidth+paddingRight+borderRight
- offsetHeight=borderTop+paddingTop+cssHeight+paddingBottom+borderBottom
- clientWidth(可视区域宽度): paddingLeft+cssWidth+paddingRight-滚动条宽
- scrollWidth(实际内容宽度): paddingLeft+cssWidth+paddingRight-滚动条宽+滚动条可以滚动的长度(若无滚动，则等于clientWidth，即本例)
- clientHeight(可视区域高度): paddingTop+cssHeight+paddingBottom-滚动条宽
- scrollHeight(实际内容高度): paddingTop+cssHeight+paddingBottom-滚动条宽+滚动条可以滚动的长度