標籤：web前端 javascript Firefox Google ie
這幾個屬性做滾動時會經常用到，現總如下：
首先定義一個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和Google為622，Firefox為612 即ie和Google包含body的左邊框，而Firefox不包含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和Google包含body的左邊框，而Firefox不包含body的左邊框。即在Firefox中比在ie和Google減少body的左邊框
document.body.clientLeft：body的左邊框
scrollTop clientTop offsetTop scrollHeight clientHeight clientWidth的區別及用法
