<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>访问元素的尺寸和座标</title>
<style type="text/css">
.big{
position: absolute;
left:50px;
top:100px;
width: 400px;
height: 450px;
background-color: #ccc;
overflow: auto;
}
.small{
margin: 50px;
padding: 30px;
border: 20px solid blue;
width:200px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="big">
<div class="small">
XXXXXXXXXXXXXXXXXXXXXXX<br/>
XXXXXXXXXXXXXXXXXXXXXXX<br/>
XXXXXXXXXXXXXXXXXXXXXXX<br/>
XXXXXXXXXXXXXXXXXXXXXXX<br/>
XXXXXXXXXXXXXXXXXXXXXXX<br/>
XXXXXXXXXXXXXXXXXXXXXXX<br/>
XXXXXXXXXXXXXXXXXXXXXXX<br/>
XXXXXXXXXXXXXXXXXXXXXXX<br/>
XXXXXXXXXXXXXXXXXXXXXXX<br/>
XXXXXXXXXXXXXXXXXXXXXXX<br/>
XXXXXXXXXXXXXXXXXXXXXXX<br/>
XXXXXXXXXXXXXXXXXXXXXXX<br/>
XXXXXXXXXXXXXXXXXXXXXXX
</div>
</div>
<script type="application/javascript" src="js/jquery-1.8.3.min.js"></script>
<script>
$(function(){
var w = $(".big").width();//width()方法用于获取内容的宽度
var h = $(".big").height();//width()方法用于获取内容的高度
console.info("外框宽度为："+w+"外框高度为："+h);
//获取座标
var p=$(".big").position();//position()用于获取左上角的座标
console.info("外框左上角定点座标为："+p.left+","+ p.top);
//得到内框的宽度和高度
console.info("内框宽度为"+$(".small").width()+";内框的高度为"+$(".small").height());
//求内框座标不能用position()
//position()是当前节点相对于父节点的位移量，offset用于获取指定组件与窗口之间的距离
console.info("外框左上角定点座标为："+$(".small").offset().left+","+$(".small").offset().top);
//得到内框的内部尺寸（不包含边框）
console.info("内框的内部尺寸为：" + $(".small").innerWidth() +","+ $(".small").innerHeight());
//得到内框的外部尺寸(不包含外边距)
console.info("内框的外部尺寸为："+$(".small").outerWidth() +"," + $(".small").outerHeight());
//得到内框的外部尺寸（包含外边距）
//设置为true的时候，则包含外边距
console.info("内框的外部尺寸（包含外边距）:"+$(".small").outerWidth(true) +"," + $(".small").outerHeight(true));
})
</script>
</body>
</html>访问元素的尺寸和座标
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
标签点击事件后的操作
其實，也不知道怎麼去給文章命名，就簡單的記錄下我遇到的問題吧，不多說，上代碼。 <a id="tab1" href="https://www.baidu.com">測試連接</a> <br/>