<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery尺寸和位置</title>
<style>
.father{
width: 200px;
height: 200px;
background: red;
/*設置50px的黑色邊框*/
border: 50px solid black;
/*設置距離瀏覽器左邊窗口50px*/
margin-left: 50px;
/*生成相對定位元素*/
position: relative;
}
.son{
width: 100px;
height: 100px;
background: blue;
/*生成絕對定位元素*/
position: absolute;
left: 50px;
top: 50px;
}
</style>
<script src="jQuery/jquery-1.12.4.js"></script>
<script>
$(function () {
var btns = document.getElementsByTagName("button");
btns[0].onclick = function () {
//獲取標籤的寬度
console.log($(".father").width());
// 獲取距離窗口的偏移位
console.log($(".son").offset().left);
// 獲取相對於它最近的具有相對位置(position:relative或position:absolute)的父級元素的距離
console.log($(".son").position().left);
};
btns[1].onclick = function () {
//設置標籤的寬度
console.log($(".son").width("200px"));
// 設置標籤距離窗口的偏移量
$(".son").offset({
left:10
})
// 設置距離他最近的相對位置的距離，注意position不能設置
$(".son").css({
left:10
})
}
})
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<button>獲取</button>
<button>設置</button>
</body>
</html>
