<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>offsetWidth、offsetHeight、offsetTop、offsetLeft</title>
<style>
*{
margin:0px auto;
padding:0px;
}
#div1{
400px;
height:400px;
overflow-y:scroll;
border:1px solid #F60;
position:relative;
}
#div2{
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>