offsetXXX和scollXXX的一些操作

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>offsetWidth、offsetHeight、offsetTop、offsetLeft</title>
<style>
*{
margin:0px auto;
padding:0px;
}

#div1{
width:400px;
height:400px;
overflow-y:scroll;
border:1px solid #F60;
position:relative;
}

#div2{
width:340px;
height:600px;
border:1px solid #36C;
}
</style>

<script>
function $(id){
return document.getElementById(id);
}

window.onload=function(){
alert( $("div1").offsetHeight );  //402=400(自身的宽度)+2(左右边框)
alert( $("div2").offsetHeight );  //602=600+2

alert( $("div1").offsetWidth );  //402=400+2
alert( $("div2").offsetWidth );  //342=340+2

alert( $("div1").offsetTop );  //0 顶部到页面顶部的距离
alert( $("div2").offsetTop ); //1 距离div顶部的距离  1 就是那一个像素的边框

alert( $("div1").offsetLeft ); //599 左边距离页面最左边的距离
alert( $("div2").offsetLeft ); //21 距离div1左边的距离

$("div1").scrollTop+=10;

alert( $("div1").scrollHeight ); //1217 实际内容的高度
alert( $("div2").scrollHeight ); //1216 实际内容高度

alert( $("div1").scrollWidth ); //383 实际内容的宽度减去滚动条所占的宽度
alert( $("div2").scrollWidth ); //340 实际内容高度

alert( $("div1").scrollTop ); //10 卷进去的高度
alert( $("div2").scrollTop ); //0

alert( $("div1").scrollLeft ); //0
alert( $("div2").scrollLeft ); //0
}
</script>
</head>

<body>
<div id="div1">
     <div id="div2">
         <p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
            <p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
            <p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
            <p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
            <p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
            <p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
            <p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
            <p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
            <p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
            <p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
            <p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
            <p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
            <p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
            <p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
            <p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
            <p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
            <p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
            <p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
            <p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
            <p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
            <p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
            <p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
            <p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
            <p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
            <p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
            <p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
            <p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
            <p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
            <p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
            <p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
            <p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
            <p>甫炅寺大街副科级啊房奋斗就是大口径风扇的风警方打死</p>
        </div>
    </div>
    
    <p>offsetHeight：返回元素定义时的高度，以像素为单位,包含内边距，不包括外边距。</p> 
<p>offsetWidth：返回元素定义时的宽度，以像素为单位,包含内边距，不包括外边距。</p>  
<p>offsetLeft：返回当前元素的左边界到它的包含元素的左边界的偏移量，以像素为单位。注意这里子div内边距是不会影响到offsetLeft。 
<p>offsetTop：返回当前元素的上边界到它的包含元素的上边界的偏移量，以像素为单位。</p>
    <p>scrollHeight：返回元素实际的高度，以像素为单位。</p>
    <p>scrollWdith：返回元素实际的宽度，以像素为单位。</p>
    <p>scrolltop：返回已经滚动到元素的上边界的像素数。只有在元素有滚动条的时候，这些像素才有用。如果不拖动滚动条，默认的值为0</p> 
<p>scrollLeft：返回已经滚动到元素的左边界的像素数。只有在元素有滚动条的时候，这些像素才有用。如果不拖动滚动条，默认的值为0</p> 
</body>
</html>