视窗宽高offset、client、scroll
生活随笔
收集整理的這篇文章主要介紹了
视窗宽高offset、client、scroll
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
先看盒子模型
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>這里是內(nèi)容框這里是內(nèi)容框這里是內(nèi)容框這里是內(nèi)容框這里是內(nèi)容框這里是內(nèi)容框這里是內(nèi)容框這里是內(nèi)容框這里是內(nèi)容框這里是內(nèi)容框這里是內(nèi)容框這里是內(nèi)容框這里是內(nèi)容框這里是內(nèi)容框這里是內(nèi)容框這里是內(nèi)容框這里是內(nèi)容框這里是內(nèi)容框這里是內(nèi)容框這里是內(nèi)容框這里是內(nèi)容框這里是內(nèi)容框這里是內(nèi)容框這里是內(nèi)容框</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>
有滾動(dòng)條,滾動(dòng)條在padding內(nèi),占用了padding,paading不夠填充,便占用content區(qū)域,所以content大小為
width：200(CSS)-17(滾動(dòng)條)
height：200(CSS)-17(滾動(dòng)條)
- offsetTop: div上外border線到視窗頂?shù)木嚯x
- offsetLeft: div左外border線到視窗左的距離
- offsetWidth=borderLeft+paddingLeft+cssWidth+paddingRight+borderRight
- offsetHeight=borderTop+paddingTop+cssHeight+paddingBottom+borderBottom
- clientWidth(可視區(qū)域?qū)挾?: paddingLeft+cssWidth+paddingRight-滾動(dòng)條寬
- scrollWidth(實(shí)際內(nèi)容寬度): paddingLeft+cssWidth+paddingRight-滾動(dòng)條寬+滾動(dòng)條可以滾動(dòng)的長度(若無滾動(dòng)，則等于clientWidth，即本例)
- clientHeight(可視區(qū)域高度): paddingTop+cssHeight+paddingBottom-滾動(dòng)條寬
- scrollHeight(實(shí)際內(nèi)容高度): paddingTop+cssHeight+paddingBottom-滾動(dòng)條寬+滾動(dòng)條可以滾動(dòng)的長度
轉(zhuǎn)載于:https://www.cnblogs.com/moon-future/p/5833117.html
與50位技術(shù)專家面對(duì)面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖總結(jié)
以上是生活随笔為你收集整理的视窗宽高offset、client、scroll的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 设置ubuntu下使用ls命令显示文件颜
- 下一篇： 树分治树链剖分相关题目讨论