<style type="text/css">
#box1{
width:100px;
height:100px;
background-color:red;
padding:10px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var box1=document.getElementById("box1");
var btn01=document.getElementById("btn01");
btn01.onclick=function(){
/*clientWidth:
clientHeight:
这两个属性可以获取元素可见高度和宽度
这些属性都是不带px的,返回的都是一个数字，可以直接进行计算
会获取元素的高度和宽度包括内容区和内边距（不包括边框）
注意这些属性都是只读的，不可以修改
box1.clientHeight=300;是错的
*/
/*
offsetWidth
offsetHeight
可以获取元素整个宽度和高度（包括内容区，内边距和边框）
alert(box1.offsetWidth);
*/
alert(box1.clientWidth);//输出120
/*
offsetparent:
可以用于获取当前元素的定位父元素
会获取离当前元素最近的开启了定位的祖先元素
如果所有的祖先元素都没有开启定位，则返回body
*/
var op=box1.offsetParent;//输出的是box2，最近的是box2
/*
offsetLeft:
当前元素相对于其定位父元素的水平偏移量
offsetTop：;
当前元素相对于其定位父元素的垂直偏移量
*/
/*
scrollWidth：
scrollHeight:可以获取元素整个滚动区的宽度和高度
*/
/*
scrollLeft：
可以获取水平滚动条滚动的距离
scrollTop：可以获取垂直滚动条滚动的距离
*/
/*
这边需要注意的是
scrollHeight-scrollTop==clientHeight
这个时候说明的是垂直滚动条到底了
注意的是：
当满足scrollWidth-scrollLeft==clientWidth
这就说明水平滚动条到底了
*/
alert(box1.offsetLeft);
}
}
</script>
</head>
<body>
<button id="btn01">点我一下</button>
<br/><br/>
<div id="box3" style="position:relative;">
<div id="box2" style="position:relative;">
<div id="box1"></div>
</div>
</div>
</body>
</html>