offset家族作用:用于得到元素尺寸
1.offsetWidth和offsetHeight
offsetWidth: 得到对象的宽度(自己的,与他人无关);offsetWidth=width+border+padding
offsetHeight: 得到对象的高度(自己的,与他人无关);offsetHeight=height+border+padding
注意：style.width只能得到行内样式，height同理
具体代码实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>offsetWidth和offsetHeight</title>
<style type="text/css">
#box1 {
width: 200px;
height: 300px;
border: 2px solid #ccc;
margin: 100px auto;
background-color: pink;
padding: 10px;
}
</style>
</head>
<body>
<div id="box1">
</div>
</body>
<script type="text/javascript">
var box1 = document.getElementById('box1');
console.log(box1.style.width);//空,只能得到行内式的样式
console.log(box1.offsetWidth);//242;offsetWidth = width+border+padding
console.log(box1.offsetHeight);//324;同offsetWidth
</script>
</html>2.offsetLeft和offsetTop
offsetLeft 得到距离上级盒子(带有定位)的左侧距离
offsetTop 得到距离上级盒子(带有定位)的上侧距离
注意:如果父级(此处意为父亲,祖父，曾祖父等父级层)没有设置定位,则以body为参照;数值从父级的padding开始算,border不算,可理解为从边框到边框
具体代码实例：
注：清除浏览器自带样式
1）父级没有定位时，以body为参照
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>offsetLeft和offsetTop</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box {
width: 200px;
height: 200px;
border: 2px solid #ccc;
margin: 100px;
background-color: pink;
}
#son {
width: 50px;
height: 50px;
background-color: purple;
border: 2px solid red;
}
</style>
</head>
<body>
<div id="box">
<div id="son"></div>
</div>
</body>
<script type="text/javascript">
var son = document.getElementById('son');
console.log(son.offsetLeft);//102;父级没有定位时，以body为参照对象
console.log(son.offsetTop);//102;同offsetLeft
</script>
</html>2)父级(父亲)含有定位时，以父级为参照
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>offsetLeft和offsetTop</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box {
width: 200px;
height: 200px;
border: 2px solid #ccc;
margin: 100px;
background-color: pink;
padding: 10px;
position: relative;
}
#son {
width: 50px;
height: 50px;
background-color: purple;
border: 2px solid red;
margin-left: 40px;
}
</style>
</head>
<body>
<div id="box">
<div id="son"></div>
</div>
</body>
<script type="text/javascript">
var son = document.getElementById('son');
console.log(son.offsetLeft);//50;以box盒子为参照,margin-left+padding
console.log(son.offsetTop);//10
</script>
</html>3)父级(祖父)有定位时，以父级为参照
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>offsetLeft和offsetTop</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.content {
position: relative;
background-color: orange;
}
#box {
width: 200px;
height: 200px;
border: 2px solid #ccc;
margin: 100px;
background-color: pink;
padding: 10px;
}
#son {
width: 50px;
height: 50px;
background-color: purple;
border: 2px solid red;
margin-left: 40px;
}
</style>
</head>
<body>
<div class="content">
<div id="box">
<div id="son"></div>
</div>
</div>
</body>
<script type="text/javascript">
var son = document.getElementById('son');
console.log(son.offsetLeft);//152;以content盒子为参照
console.log(son.offsetTop);//12
</script>
</html>3.offsetParent
得到他的最近的父级(带有定位)盒子
例：
当父盒子带有定位时，返回父盒子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>offset家族</title>
<style type="text/css">
.main {
/*position: relative;*/
}
#box1 {
width: 200px;
height: 300px;
border: 2px solid #ccc;
margin: 100px auto;
background-color: pink;
padding: 10px;
position: relative;
}
</style>
</head>
<body>
<div class="main">
<div id="box1">
<div id="son"></div>
</div>
</div>
</body>
<script type="text/javascript">
var son = document.getElementById('son');
console.log(son.offsetParent);//box1盒子
</script>
</html>当祖父盒子带有定位时，返回祖父盒子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>offset家族</title>
<style type="text/css">
.main {
position: relative;
}
#box1 {
width: 200px;
height: 300px;
border: 2px solid #ccc;
margin: 100px auto;
background-color: pink;
padding: 10px;
}
</style>
</head>
<body>
<div class="main">
<div id="box1">
<div id="son"></div>
</div>
</div>
</body>
<script type="text/javascript">
var son = document.getElementById('son');
console.log(son.offsetParent);//main盒子
</script>
</html>