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>
View Code
注：此文为原创，如需转载请注明出处。