js和jq中常见的各种位置距离之offsetLeft/clientLeft/scrollLeft （一）

offsetLeft offsetTop offsetWidth offsetHeight

offsetLeft:元素的边框的外边缘距离与已定位的父容器（offsetparent）的左边距离（不包括元素的边框和父容器的边框）。

offsetTop:同理是指元素的边框的外边缘距离与已定位的父容器（offsetparent）的上边距离（不包括元素的边框和父容器的边框）。

offsetWidth:描述元素外尺寸宽度，是指元素内容宽度+内边距宽度(左右两个)+边框(左右两个)，不包括外边距和滚动条部分。

offsetHeight:同理描述元素外尺寸高度，是指元素内容高度+内边距高度(上下两个)+边框(上下两个)，不包括外边距和滚动条部分。

clientLeft clientTop clientWidth clientHeight

clientLeft:元素的内边距的外边缘和边框的外边缘的距离，实际就是边框的左边框宽度

clientTop:同理边框的上边框的宽度

clientWidth:用于描述元素内尺寸宽度，是指元素内容+内边距大小，不包括边框、外边距、滚动条部分

clientHeight:同理用于描述元素内尺寸高度，是指元素内容+内边距大小，不包括边框、外边距、滚动条部分

scrollTop scrollLeft scrollWidth scrollHeight

scrollWidth：内容区域尺寸加上内边距加上溢出尺寸，当内容正好和内容区域匹配没有溢出时，这些属性与clientWidth和clientHeight相等 !important

scrollHeight：同上

scrollTop：滚动条上方卷去的高度

scrollLeft：滚动条左边卷去的宽度

下面贴上调试代码：

 1 <style>
 2         *{margin:0;padding:0;}
 3         #parent{ position: relative; padding: 10px; margin:30px; background-color:#CCC; border: solid 10px #fbc;}
 4         #child{ height: 200px; width: 200px; padding: 10px; margin: 30px;border: solid 10px #fbc;background-color:#afb;}
 5         #parent1{ padding: 10px; background-color: #fc8; width:300px;  height:300px;overflow:auto ;clear:both; }
 6         #child1 { background-color: #bfc; width: 400px; height: 400px;border: 10px solid  #c8f;}
 7     </style>
 8     <body id="body">
 9         
10     <div id="parent"> 
11         <div id="child">
12         </div>
13        </div>
14 
15     <div id="parent1">
16         <div id="child1">
17         </div>
18     </div>
19     <script src="jquery_1.11.3.min.js"></script>
20     <script type="text/javascript">
21 
22         var child = $("#child").get(0);
23         console.log($("#child"))//获得对象
24         console.log(child)//获得DOM元素
25         //$("#child")是一个对象 此处要获得DOM元素  因此要加get(0) 
26         //get()是获取所有DOM元素的集合  因此加get(0)
27 
28 //        console.log( "offsetParent: " + child.offsetParent.id);
29 //        console.log( "offsetHeight: " + child.offsetHeight);
30 //        console.log( "offsetWidth: " + child.offsetWidth);
31 //        console.log( "offsetLeft: " + child.offsetLeft);
32 //        console.log( "offsetTop: " + child.offsetTop);
33           
34 
35 //---------------------------------------------------------------- 
36 
37 
38 //        console.log( "clientHeight: " + child.clientHeight);
39 //        console.log( "clientWidth: " + child.clientWidth);
40 //        console.log( "clientLeft: " + child.clientLeft);
41 //        console.log( "clientTop: " + child.clientTop);
42         
43 //---------------------------------------------------------------- 
44 
45 
46 
47         var parent1 = $("#parent1").get(0);
48 //        console.log( "clientHeight: " + parent1.clientHeight);
49 //        console.log( "clientWidth: " + parent1.clientWidth);
50         console.log( "scrollHeight: " + parent1.scrollHeight);
51         console.log( "scrollWidth: " + parent1.scrollWidth);
52 //        
53 //       $("#parent1").scroll(function(){
54 //               var scrollTop = document.documentElement.scrollTop||document.body.scrollTop
55 //               var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft
56 //            console.log( "scrollTop: " + parent1.scrollTop);
57 //            console.log( "scrollLeft: " + parent1.scrollLeft);
58 //        })
59         
60 
61 
62     </script>
63     </body>