<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* { margin: 0; padding: 0;}
#box{
width: 100px;
height: 100px;
border: 30px solid red;
padding: 20px;
position: relative;
}
#box1{
height: 100px;
width: 100px;
background: blue;
position: absolute;left: 10px;top:10px;
padding: 10px;
}
</style>
</head>
<body>
<div id="box">
<div id="box1">
<p>offset相关测试</p>
<p>offset相关测试</p>
<p>offset相关测试</p>
<p>offset相关测试</p>
<p>offset相关测试</p>
<p>offset相关测试</p>
<p>offset相关测试</p>
<p>offset相关测试</p>
<p>offset相关测试</p>
<p>offset相关测试</p>
<p>offset相关测试</p>
<p>offset相关测试</p>
<p>offset相关测试</p>
<p>offset相关测试</p>
<p>offset相关测试</p>
<p>offset相关测试</p>
</div>
</div>
<script>
window.onload = function () {
console.log(box.offsetHeight);//200
console.log(box.offsetWidth);//200
console.log(box.offsetLeft);//0
console.log(box.offsetTop);//0
console.log('-------------------------------');
console.log(box1.offsetHeight);//120
console.log(box1.offsetWidth);//120
console.log(box1.offsetLeft);//10
console.log(box1.offsetTop);//10
}
</script>
</body>
</html>
1、offsetWidth实际获取的是盒模型
offsetWidth = width + border + padding
- offsetWidth=Width+(left)border+(right)border+(left)padding+(right)padding
-------------------------------------------------------------------------------------------
2、offsetHeight实际获取的是盒模型
offsetHeight = height + border + padding
- offsetHeight=height+(top)border+(bottom)border+(top)padding+(bottom)padding
-------------------------------------------------------------------------------------------
3、offsetLeft实际获取的是盒模型
offsetLeft = left + marginLeft
（offsetleft表示距离offsetparent的左边间距）
（offsetleft是根据父级的定位来确定距离的）
-------------------------------------------------------------------------------------------
4、offsetTop实际获取的是盒模型
offsetTop = top +marginTop
（offsetleft表示距离offsetparent的顶边间距）
（offsetleft是根据父级的定位来确定距离的）
网友评论