JS-元素大小深入学习-offset、client、scroll等学习研究笔记

一些属性和方法,在dom中没有规定如何确定页面中元素大小的情况下诞生。。。

1.偏移量(offset dimension)

 测试代码:

 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>offset偏移量学习</title>
 6         <meta name="author" content="郭菊锋/702004176@qq.com"/>
 7         <style type="text/css">
 8             #a{
 9                 height: 300px;width: 300px;
10                 border: 1px solid red;
11                 -webkit-box-sizing: border-box;
12                 -moz-box-sizing: border-box;
13                 box-sizing: border-box;
14                 padding: 10px 0;
15                 margin: 10px 0;
16                 overflow: scroll;
17             }
18             #a p{height: 450px;}
19         </style>
20     </head>
21     <body>
22         <div id="a" style="">
23             <p></p>
24         </div>
25     </body>
26 </html>

 

js代码:

1 <script type="text/javascript">
2             var a= document.getElementById('a');
3               console.log(a.offsetHeight);
4             console.log(a.clientHeight);
5 </script>

 

获取理论结果:

//offsetWidth  包括padding和border,不包括滚动条,滚动条是默认在宽度中的。

几种情况——
//加了boxsizing的情况:  offsetWidth值  =  style的宽度值,
//不加boxsizing的情况 :   offsetWidth值  =  style中的宽度  +  padding左右值  +  border左右值。


//有无滚动条不受影响


//height同理

以上理论,经测在谷歌和火狐中都适用。

offsetLeft 和 offsetTop

offsetLeft/offsetHeight是元素的左边框/上边框到其最近的、具有大小的元素左边框/上边框的距离。

具体值还是取决于他的offsetParent。

心中有个概念,但是最终解释还是看不同情况下的结果:

 2.客户区大小(client dimension)

指的是元素内容及其内边距所占据的空间大小,从字面上看,客户区大小就是元素内部的空间大小,因此滚动条占用的空间不计算在内【js高级程序设计文摘】

测试offsetWidth顺便测试的clientWidth的

 

clientWidth  永远会减去滚动条的尺寸和border的尺寸,只包括内容和padding的。!! 即使加了box-sizing=border-box也不包括border,

 

几种情况——
//加了box-sizing:   clientWidth值就是  =  style中的宽度 - border宽度,
//不加box-sizing:   clientWidth值就是  =  style中的宽度 + padding左右值。

//有滚动条情况:clientWidth值  =  (style中的宽度 + padding左右值)- 17px(滚动条的宽度值);
//滚动条加box-sizing情况:  clientWidth值  =  style中的宽度 - 17px(滚动条的宽度值)- border的左右宽度值

 

//height同理

 

以上理论,经测在谷歌和火狐中都适用。

3.scrollHeight(client dimension)

 scrollHeight返回元素的完整的高度,以像素为单位

posted @ 2017-04-20 10:23  xing.org1^  阅读(237)  评论(0编辑  收藏  举报