jQuery之offset和position
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>12_offset和positiontitle>
head>
<style type="text/css">
* {
margin: 0px;
}
.div1 {
position: absolute;
width: 200px;
height: 200px;
top: 20px;
left: 10px;
background: blue;
}
.div2 {
position: absolute;
width: 100px;
height: 100px;
top: 50px;
background: red;
}
.div3 {
position: absolute;
top: 250px;
}
style>
<body style="height: 2000px;">
<div class="div1">
<div class="div2">测试offsetdiv>
div>
<div class='div3'>
<button id="btn1">读取offset和positionbutton>
<button id="btn2">设置offsetbutton>
div>
<script src="js/jquery-1.10.1.js" type="text/javascript">script>
<script type="text/javascript">
/*
需求:
1. 点击 btn1
打印 div1 相对于页面左上角的位置
打印 div2 相对于页面左上角的位置
打印 div1 相对于父元素左上角的位置
打印 div2 相对于父元素左上角的位置
2. 点击 btn2
设置 div2 相对于页面的左上角的位置
*/
$('#btn1').click(function () {
// 打印 div1 相对于页面左上角的位置
var offset = $('.div1').offset()
console.log(offset.left, offset.top) // 10 20
// 打印 div2 相对于页面左上角的位置
offset = $('.div2').offset()
console.log(offset.left, offset.top) // 10 70
// 打印 div1 相对于父元素左上角的位置，div2的父元素就是div1
var position = $('.div1').position()
console.log(position.left, position.top) // 10 20
// 打印 div2 相对于父元素左上角的位置
position = $('.div2').position()
console.log(position.left, position.top) // 0 50
})
//设置div2相对于整个页面左上角的位置，
$('#btn2').click(function () {
$('.div2').offset({
left: 50,
top: 100
})
})
script>
body>
html>
界面：
点击设置offset按钮之后：