欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 编程资源 > 编程问答 >内容正文

编程问答

视窗宽高offset、client、scroll

发布时间：2024/9/5 编程问答 50 豆豆
生活随笔 收集整理的这篇文章主要介绍了 视窗宽高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的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。