scrollTop clientTop offsetTop scrollHeight clientHeight clientWidth的差别及使用方法

这几个属性做滚动时会经经常使用到。现总例如以下：

首先定义一个div。样式例如以下：

<style>

*{ margin:0px; padding:0px;}

body{ margin:0px; padding:10px; border:solid 10px #69F;}

.aa{ margin:20px auto 0px; width:100px; height:50px; overflow:auto; border:solid 1px #cccccc; padding:0px 10px;}

</style>

<script type="text/javascript">

window.onload = test;

function test(){

var aa = document.getElementById("aa");

//aa.scrollTop = 60;

//alert(aa.scrollTop); //假设滚动栏不滚动时为0。比方滚动20，则弹出20

//alert(document.body.scrollHeight);//整个屏幕的可显示网页的高度。即一屏的高度 666

//alert(document.body.clientTop); //10 即body的上边框宽度

//alert(aa.style.top); //什么也不弹出 ？？？

//alert(aa.scrollTop); //60 假设上面aa.scrollTop不设置为60。即滚动栏不滚动时，弹出0

//alert(aa.offsetTop); //40 div偏移顶部窗体的距离

//alert(aa.clientTop); //1 即div的上边框

//alert(aa.scrollHeight); //380 div内容的总高度。即不设高度，让内容自适应得到的高度 + padding

//alert(aa.offsetHeight); //72 div的高度加上上下padding再加上 border 即height + paading + border

//alert(aa.clientHeight); //70 div的高度加上上下padding 即height + padding

//alert(document.body.clientHeight) //112 屏幕中显示内容的高度

//alert(aa.clientWidth); //103 div的宽度减去滚动栏的宽度再加上左右padding

//alert(aa.scrollWidth); //103 div的宽度减去滚动栏的宽度再加上左右padding ，和 aa.clientWidth一样

//alert(aa.offsetWidth); //122 div的宽度加上padding + border 即width + padding + border

//alert(document.body.clientWidth); //1346 整个屏幕的宽度减去body的左右border 即1366 - 20

//alert(document.body.offsetWidth); //1366 整个屏幕的宽度

alert(aa.clientLeft); //1 即div的左边框

alert(aa.scrollLeft); //0 滚动栏没有向右滚动。所以弹出0

alert(aa.offsetLeft); //ie和谷歌为622。火狐为612 即ie和谷歌包括body的左边框，而火狐不包括body的左边框。总之

都是div距窗体左边的距离。

alert(document.body.clientLeft); //10 即body的左边框

}

</script>

div.scrollTop：假设上面aa.scrollTop不设置为60，即滚动栏不滚动时，弹出0

div.offsetTop：div偏移顶部窗体的距离

div.clientTop：div的上边框

div.scrollHeight：div内容的总高度，即不设高度。让内容自适应得到的高度 + padding

div.offsetHeight：整个div加上上下边框的高度再加上border。

即整个div的高度。 即height + padding + border

div.clientHeight：css样式文件中规定的div的高度再加上上下padding。不加上下边框的高度。即height + padding

document.body.clientHeight：屏幕中显示内容的高度 不加上body的上下边框

div.clientWidth：div的宽度减去滚动栏的宽度再加上左右padding

div.scrollWidth：和div.clientWidth一样。

div.offsetWidth：div的宽度加上padding + border 即width + padding + border

document.body.clientWidth：整个屏幕的宽度。即屏幕的宽度的显示分辨率的宽度减去body的左右边框

document.body.offsetWidth：整个屏幕的宽度。即屏幕的宽度的显示分辨率的宽度。1366

div.clientLeft：即div的左边框

div.scrollLeft：滚动栏向右滚动的距离

div.offsetLeft：div距窗体的左边框，ie和谷歌包括body的左边框。而火狐不包括body的左边框。

即在火狐中比在ie和谷歌降低body的左边框

document.body.clientLeft：body的左边框