视窗宽高offset、client、scroll
生活随笔
收集整理的這篇文章主要介紹了
视窗宽高offset、client、scroll
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
先看盒子模型
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-滾動條寬+滾動條可以滾動的長度
轉載于:https://www.cnblogs.com/moon-future/p/5833117.html
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的视窗宽高offset、client、scroll的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 设置ubuntu下使用ls命令显示文件颜
- 下一篇： 树分治树链剖分相关题目讨论