<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#box {
width: 1000px;
height: 1000px;
background-color: #cccccc;
position: relative;
margin: 0 auto;
}
#box1 {
width: 150px;
height: 200px;
background-color: blue;
overflow: auto;
border: #0000FF solid 5px;
position: absolute;
left: 30px;
}
#box2 {
width: 500px;
height: 500px;
background-color: yellow;
}
</style>
<script src="js/Jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
var $box1=$("#box1")[0];
console.log($box1);
// cliwentWidth是可是区域的宽度;包括padding,不包括margin和border;
console.log($box1.clientWidth);//117px
console.log($box1.clientHeight)//166px
console.log($box1.clientLeft);//5px,边框宽
// scrollWidth是对象在水平或者垂直方向可以滚动的最大宽度和高度;
console.log($box1.scrollWidth)//500px
console.log($box1.scrollHeight)//500px
console.log($box1.scrollLeft);//滚动条水平方向滚动的距离;
// offsetWidth是盒子的实际宽度,包括padding和border,不包括margin;
console.log($box1.offsetWidth);//150px
console.log($box1.offsetHeight);//200px
console.log($box1.offsetLeft);//30px,与定位父元素间的距离
});
</script>
</head>
<body>
<div id="box">
<div id="box1">
<div id="box2">
</div>
</div>
</div>
</body>
</html>