先看盒子模型

 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

视窗宽高offset、client、scroll相关推荐

offset/client/scroll一些总结
offset/client/scroll一些总结 1.offset 首先offset共有五个值 1.offsetParent 2.offsetTop 3.offsetLeft 4.offsetWidt ...
Web APIs介绍（四）——offset/client/scroll/轮播图/本地存储
1.1. 元素偏移量 offset 系列 1.1.1 offset 概述 offset 翻译过来就是偏移量, 我们使用 offset系列相关属性可以动态的得到该元素的位置(偏移).大小等. 获得元素距 ...
offset client scroll
页面中所有标签都是元素(element),html标签是根元素,元素可看出是对象页面中所有内容都是节点(node),所以标签.属性.文本都是节点,而文本包括文字回车换行空格在DOM对象上有个 pr ...
窗口和元素的大小：offset client scroll
1.偏移量(offset)只读 offsetHeight:元素垂直方向上占用的空间大小.包括元素内容区高度.元素上下内边距.(可见的)水平滚动条高度.上下边框高度 offsetWidth:元素水平方向 ...
三大系列总结(offset client scroll)
元素偏移量offset offset概述获得元素距离带有定位父元素的位置如果子元素没有父亲或者父元素没有定位,则以body为准获得元素自身的大小(包含padding+border+width) ...
.net label在父容器中占两行显示_十分钟快速了解 JS 中的 offset、scroll、client
经常碰到offset.scroll.client这几个关键字,每次都要各种实验,这里总结一下. 两张图镇楼,随时翻阅 1. offset offset 指偏移,包括这个元素在文档中占用的所有显示宽度, ...
dom操作获取盒子宽高位置的三种方法,offset/scroll/client三大家族使用详解(附源码及注释)
结论:页面body的高度==视口的高度+滚动条滚动的距离. 这是一个恒等式,看完本篇博客,你将了解offset/scroll/clent三大事件获取宽高位置的具体含义,运用所学内容可以推导出这样的恒等 ...
offset、scroll、client三大家族
1.offset 偏移 1.offsetWidth 和 offsetHeight 是用来得到对象的大小,由自身宽高内边距边框构成但是不包括外边距 offsetHeight和style.he ...
jquery获取设置元素宽高位置height()、width()、offset()、position()、scrollTop()、scrollLeft()
全栈工程师开发手册 (作者:栾鹏) jquery系列教程2-style样式操作全解 jquery获取设置元素宽高位置 jquery的通过height().width().offset().positi ...

视窗宽高offset、client、scroll

先看盒子模型

视窗宽高offset、client、scroll相关推荐

最新文章

热门文章