<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>22-jQuery位置和尺寸操作的方法</title>
<script src="JS_file/jquery-1.12.4.js"></script>
<style>
*{
padding: 0;
margin: 0;
}
.father{
width:200px;
height: 200px;
background: red;
border: 50px solid #000;
margin-left: 50px;
position: relative;
}
.son{
width: 100px;
height: 100px;
background:blue;
position: absolute;
left: 50px;
top: 50px;
}
</style>
<script>
$(function () {
// 编写jQuery相关代码
//监听获取
var btns=document.getElementsByTagName("button");
btns[0].onclick=function () {
//获取元素的宽度
// console.log($(".father").width());
// offset([coordinates])
//作用:获取元素距离窗口的偏移位
// console.log($(".son").offset().left);
// position()
// 作用:获取元素距离定位元素的偏移位
console.log($(".son").position().left);
};
//监听设置
btns[1].onclick=function () {
//设置元素的宽度
// $(".father").width("500px");
// $(".son").offset({
// left:10
// })
// 注意点:position方法只能获取不能设置
// $(".son").position({
// left:10
// })
// 想设置用css样式来设置
$(".son").css({
left:"10px"
})
}
})
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<button>获取</button>
<button>设置</button>
</body>
</html>