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

这几个属性做滚动时会经常用到，现总如下：

首先定义一个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的左边框