5-7位置操作
2019-03-16 本文已影响0人
大庆无疆
元素相对页面的位置获取和设置
方法：
.offset()
这个方法返回的是一个对象，有.left和.top属性
获取
$('#box').offset().left
$('#box').offset().top
设置
$('#box').offset({ top: 10, left: 30 });
设置值使用键值对的方式
设置的时候元素在设置前如果没有脱离文档流,设置的时候会自动进行脱离文档流,默认为relative
<body>
<input type="button" name="" value="点击显示" id="btn">
<div id="box"></div>
<script type="text/javascript" src="js/jquery-1.12.2.min.js"></script>
<script type="text/javascript">
// 需求：点击按钮，让div的位置相对于目前的两倍
// 页面加载事件
$(function () {
// 注册点击事件
$('#btn').click(function () {
//获取位置,不带px------->都是数字类型
var boxLeft = $('#box').offset().left;
var boxTop = $('#box').offset().top;
// 重新设置
$('#box').offset({left: boxLeft * 2, top: boxTop * 2});
});
});
</script>
</body>
