在学习的时候一直不理解offsetWidth，offsetLeft,scrollHeight这些属性的区别，今天从网上看到博友的文章，自己总结了一下，与君共享，有疏漏之处，还望指教！！
效果图如下:
css样式如下：
<style>
*,div{margin: 0px;padding: 0px;}
.container { width: 1000px;height: 500px;margin: 100px auto;background: pink;position: relative}
.container div{position: absolute;left: 100px;}
</style>
------------------------------------------
html如下：
<body> <div class="container" id="container"> <div style="width:200px;height:200px;background:green;overflow:scroll;border:10px solid black;box-sizing:content-box;top:100px;" id="content"> 马来西亚外交部说，一名朝鲜籍男子在吉隆坡机场被杀一事是一起突然的死亡事件，马来西亚政府按照正常程序进行尸检和调查。一切公开透明。马来西亚反对一切玷污马声誉的行为。马来西亚已经召回驻朝鲜大使协助调查。（央视记者邓雪梅） 马来西亚外交部说，一名朝鲜籍男子在吉隆坡机场被杀一事是一起突然的死亡事件，马来西亚政府按照正常程序进行尸检和调查。一切公开透明。马来西亚反对一切玷污马声誉的行为。马来西亚已经召回驻朝鲜大使协助调查。（央视记者邓雪梅） 马来西亚外交部说，一名朝鲜籍男子在吉隆坡机场被杀一事是一起突然的死亡事件，马来西亚政府按照正常程序进行尸检和调查。一切公开透明。马来西亚反对一切玷污马声誉的行为。马来西亚已经召回驻朝鲜大使协助调查。（央视记者邓雪梅） 马来西亚外交部说，一名朝鲜籍男子在吉隆坡机场被杀一事是一起突然的死亡事件，马来西亚政府按照正常程序进行尸检和调查。一切公开透明。马来西亚反对一切玷污马声誉的行为。马来西亚已经召回驻朝鲜大使协助调查。（央视记者邓雪梅） 马来西亚外交部说，一名朝鲜籍男子在吉隆坡机场被杀一事是一起突然的死亡事件，马来西亚政府按照正常程序进行尸检和调查。一切公开透明。马来西亚反对一切玷污马声誉的行为。马来西亚已经召回驻朝鲜大使协助调查。（央视记者邓雪梅） </div> </div> </body>
-------------------------------------
js代码如下：
1 <script> 2 window.onload = function(){ 3 var container = document.getElementById('container'); 4 var content = document.getElementById('content'); 5 6 console.log("content.style.top="+ content.style.top); 7 console.log("content.offsetHeight = "+content.offsetHeight); 8 console.log("content.offsetWidth="+content.offsetWidth); 9 console.log("content.offsetTop="+content.offsetTop); 10 console.log("content.offsetLeft="+content.offsetLeft); 11 console.log("content.clientHeight="+content.clientHeight); 12 console.log("content.clientWidth="+content.clientWidth); 13 console.log("content.clientTop="+content.clientTop); 14 console.log("content.clientLeft="+content.clientLeft); 15 console.log("content.scrollHeight="+content.scrollHeight); 16 console.log("content.scrollWidth="+content.scrollWidth); 17 20 21 } 22 23 24 </script>
控制台输出：
假设 y 为某个 HTML 控件，
关于y.offsetHeight & y.offsetWidth
y.offsetWidth指的是 y控件的绝对高度，不包括因 overflow 而未显示的部分，也就是其实际占据的宽度，整型。
y.offsetHeight指y控件自身的绝对高度，不包括因 overflow 而未显示的部分，也就是其实际占据的高度，整型。
y.offsetTop 指 y相对于父元素顶部的距离，整型。
y.offsetLeft指 y相对于父元素左边的距离，整型。
我们知道 offsetTop 可以获得 HTML 元素距离上方或外层元素的位置，style.top 也是可以的，二者的区别是：
一、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
二、offsetTop 只读，而 style.top 可读写。
三、如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。
offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样道理。
关于y.clientHeight & y.clientWidth
y.clientHeight 都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度。
在上面的这个例子中，绿色的区域为可见区，给子元素设置了宽高各为200px，border设置为10px,并设置属性box-sizing :content-box;
在控制台输出 content.clientHeight 和content.clientWidth各为183 , 滚动条的宽为17，
content.offsetWidth =220
由此可见：
y.offsetWidth = y.clientWidth + 边框 +滚动条；
关于y.scrollHeight & y.scrollWidth
y.scrollHeight 是网页内容实际高度,也就是 实例中 div中文字内容的高度。
y.scrollWidth 是网页内容的实际宽度。
简单地说：
clientHeight 就是透过浏览器看内容的这个区域高度 （示例中的绿色区域）;
offsetHeight 就是 可视区域 clientHeight 滚动条加边框；
scrollHeight 指的是容器内内容的实际高度，（示例中如果将子元素的overflow属性去除，就能看到其中内容，内容的高度即是scrollHeight）。
同理
clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。
接下来将script的内容替换如下：
<script> window.onload = function(){ console.log("content.style.left= "+content.style.left); console.log("content.offsetTop = " + content.offsetTop); console.log("content.offsetLeft = " + content.offsetLeft); console.log("content.clientTop = " + content.clientTop); console.log("content.clientLeft = " + content.clientLeft); console.log("content.scrollTop = " + content.scrollTop); console.log("content.scrollLeft = " + content.scrollLeft); } </script>
控制台输出：
关于y.offsetTop & y.offsetLeft
均指Html元素相对于自己的父元素元素的位置 ，获取的时候并没有返回单位;
关于y.clientTop & y.clientLeft
元素周围边框的厚度,如果不指定一个边框或者不定位改元素,他的值就是0
关于y.scrollTop & y.scrollLeft
如果元素是可以滚动的,可以通过这俩个属性得到元素在水平和垂直方向上滚动了多远,单位是象素.
对于不可以滚动的元素,这些值总是0
#温馨提示# offset*,client*,scroll* 应用在css中不起作用，请在js中进行运用。
-------------关于gscrollTop应用，下篇博文我将放左右箭头无间切换图片的效果----------------------
跑马灯无间滚动示例：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> ul,li{padding: 0px;margin: 0px} #marScroll{height: 60px;overflow: hidden} #marScroll li{height: 20px;line-height: 20px;font-size: 14px;} </style> </head> <body> <div id="marScroll"> <ul> <li>01</li> <li>02</li> <li>03</li> <li>04</li> <li>05</li> </ul> </div> <script> (function(){ var target = document.getElementById('marScroll'); var oUl = target.getElementsByTagName('ul')[0]; var oUl_h = oUl.offsetHeight; //当内容少的时候就不用滚动那啦 if(target.offsetHeight > oUl.offsetHeight)return; target.innerHTML+=target.innerHTML; // 判断每次滚动的距离等于第一个ul的高度时，设置scrollTop为0，然后如此的循环操作就是无间滚动了 var fn = function(){ if(target.scrollTop == oUl_h){ target.scrollTop = 0; }else{ target.scrollTop++; } } var timer = setInterval(function(){ fn(); },30); //鼠标经过此内容块，就停止滚动 //hover target.onmouseover = function(){ clearTimeout(timer); } target.onmouseout = function(){ timer = setInterval(function(){ fn(); },30); } })(); </script> </body>
Live and learn ;)
