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的左邊框