jQuery第二十篇 位置和尺寸操作的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 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>
</head>
<body>
<script src="jquery-1.10.1.min.js"></script>
<script>
$(function()
{
var btns=document.getElementsByTagName('button');
btns[0].onclick=function()
{
console.log($(".father").width());
//元素到窗口的偏移位
console.log($(".son").offset().left);
//元素到定位元素的偏移位
console.log($(".son").position().left);
}
btns[1].onclick=function()
{
$(".father").width("500px");
$(".son").offset({
left:10
});
//注意一下,position只能获取不能设置,不然会错
/*$(".son").position({
left:10
});
*/
$(".son").css({
left:"10px"
})
}
});
</script>
<div class="father">
<div class="son"></div>
</div>
<button>获取</button>
<button>设置</button>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020/08/11 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
