<!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/>