<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>访问元素的尺寸与坐标</title>
<script src="js/jquery.js"></script>
<style>
.big{
position: absolute;
left: 50px;
top: 100px;
400px;
height: 450px;
background-color: #C0C0C0;
overflow: auto;
}
.small{
margin: 50px;
padding: 30px;
border: 20px solid blue;
200px;
background-color: orange;
}
</style>
<script type="text/javascript">
//页面加载完成简写形式
$(function(){
//取得DIV高和宽
var w=$(".big").width();
var h=$(".big").height();
console.info("高:"+h+",宽:"+w);
//获取DIV位置信息 ppsition方法 取得左上角位置坐标
var p = $(".big").position();
console.info("位置信息:上"+p.top+",左"+p.left+");
console.info("内部尺寸为:"+$(".small").offset().left+","+$(".small").height())
})
</script>
</head>
<body>
<div class="big">
<div class="small">
XXXXXXXXXXXXXXXXX</br>
XXXXXXXXXXXXXXXXX</br>
XXXXXXXXXXXXXXXXX</br>
XXXXXXXXXXXXXXXXX</br>
XXXXXXXXXXXXXXXXX</br>
</div>
</div>
</body>
</html>