HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解
element.clientWidth //返回元素的可见宽度
element.clientHeight //返回元素的可见高度
element.clientTop
element.clientLeft
Ghrome中：
clientTop = borderTop
clientLeft = borderLeft
clientWidth = width + paddingclientHeight = height + padding
(client和offset与所包含的元素宽高无关）
element.scrollWidth //返回元素的总体宽度
element.scrollHeight //返回元素的总体高度
element.scrollTop //返回元素上边缘与视图之间的距离。
element.scrollLeft //返回元素左边缘与视图之间的距离
Ghrome中：
scrollWidth = 所包含元素的总宽度 + padding-left
scrollHeight = 所包含元素的总高度 + padding-top
注：所包含元素的总宽度是指：width + padding + border + margin
当元素设置了overflow属性，滚动元素后：
scrollLeft的最大值为 = scrollWidth - clientWidth
element.offsetWidth //返回元素的宽度
element.offsetHeight //返回元素的高度
element.offsetTop //返回元素的垂直偏移位置。
element.offsetLeft //返回元素的水平偏移位置。
Ghrome中：
offsetWidth = width + padding + border
offsetHeight = height + padding + border
offsetTop 获取对象相对于版面或
由 offsetTop 属性指定的父坐标的计算顶端位置
offsetLeft 获取对象相对于版面或
由 offsetParent 属性指定的父坐标的计算左侧位置
style.top:
我们知道 offsetTop 可以获得 HTML 元素距离上方或外层元素的位置，
style.top 也是可以的，
二者的区别是：
一、offsetTop 返回的是数字，
而 style.top 返回的是字符串，除了数字外还带有单位：px。
二、offsetTop 只读，而 style.top 可读写。
三、如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。
offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样道理。
clientHeight
大家对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。
offsetHeight
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。
scrollHeight
IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。
NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。
简单地说
clientHeight 就是透过浏览器看内容的这个区域高度。
NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于 clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。
IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。
参考：http://blog.csdn.net/xuantian868/article/details/3116442
应用：
制作可以滚动显示的控件
<html>
<body style="width:500px;margin:0 auto">
<div id="div1" style="white-space:nowrap;width:500px;overflow:hidden">
<img src="1.jpg"/><img src="1.jpg"/>
</div>
</body>
<script type="text/javascript">
function Scroll(){
console.log(div1.scrollLeft)
//如果滚动到末端，从头开始开始滚动
if(div1.scrollWidth-div1.clientWidth<=div1.scrollLeft){
div1.scrollLeft = 0;
}
else div1.scrollLeft++;
setTimeout(Scroll,15)
}
Scroll();
</script>
</html>