offsetWidth、offsetHeight
offsetWidth：元素的布局宽度。
offsetHeight：元素的布局高度。
offsetWidth、offsetHeight 的计算：width/height + padding + border-width，受 box-sizing 影响。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {padding: 0; margin: 0;}
#div1 {width: 200px; height: 200px; background-color: #ccc; border: 30px solid #999; padding: 50px; margin: 50px; box-sizing: content-box;}
</style>
</head>
<body>
<div id="div1"></div>
<script>
window.onload = function () {
var oDiv = document.getElementById('div1');
var nWidth = oDiv.offsetWidth //360 = width200 + border30 * 2 + padding50 * 2
var nHeight = oDiv.offsetHeight //360 = height200 + border30 * 2 + padding50 * 2
//offsetWidth和offsetHeight 的值是个数值，没有单位
}
</script>
</body>
box-sizing: border-box
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {padding: 0; margin: 0;}
#div1 {width: 200px; height: 200px; background-color: #ccc; border: 30px solid #999; padding: 50px; margin: 50px; box-sizing: border-box;}
</style>
</head>
<body>
<div id="div1"></div>
<script>
window.onload = function () {
var oDiv = document.getElementById('div1');
var nWidth = oDiv.offsetWidth //200 = width200
var nHeight = oDiv.offsetHeight //200 = height200
}
</script>
</body>
offsetParent
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {padding: 0; margin: 0;}
#div2 {width: 200px; height: 200px; background-color: #ccc; border: 30px solid #999; padding: 50px; margin: 50px;}
</style>
</head>
<body>
<div style="position: relative;">
<div id="div1">
</div>
</div>
<hr>
<ol>
<li>定位父级（offsetParent）：可以理解成 absolute 和 relative 的关系，只和 定位的父级有关</li>
</ol>
<script>
window.onload = function () {
var oDiv = document.getElementById('div1');
var parent = oDiv.offsetParent //1、div1 设置 fixed时，parent-谷歌返回 null，火狐返回 body 2、div1 未设置 fixed时，parent 返回父级定位的元素，如果没有 返回 body
alert(oDiv.offsetParent) // div
}
</script>
</body>
offsetleft、offsetTop
offsetleft、offsetTop：用来获取当前元素到其定位父级（offsetParent）的距离。
实例1
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {padding: 0; margin: 0;}
div{margin: 100px; overflow: hidden;}
#div2 {width: 200px; height: 200px; background-color: #ccc;}
</style>
</head>
<body>
<div>
<div id="div2">
</div>
</div>
<script>
window.onload = function () {
var oDiv = document.getElementById('div2');
var left = oDiv.offsetLeft
var top = oDiv.offsetTop
console.log(left,top) // 200,200 父级没有设置定位标签，所以oDiv 的 offsetParent 为 body
}
</script>
</body>
实例2
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {padding: 0; margin: 0;}
div{margin: 100px; overflow: hidden;}
#div2 {width: 200px; height: 200px; background-color: #ccc;}
</style>
</head>
<body>
<div id="div1" style="position: relative;">
<div id="div2">
</div>
</div>
<script>
window.onload = function () {
var oDiv = document.getElementById('div2');
var left = oDiv.offsetLeft
var top = oDiv.offsetTop
console.log(left,top) // 100,100 父级没有设置定位标签，所以oDiv 的 offsetParent 为 div1
}
</script>
</body>
实例3、在实例2中，如何获取 div2 到 body 的偏移量
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {padding: 0; margin: 0;}
div {margin: 100px; overflow: hidden;}
#div2 {width: 200px; height: 200px; background-color: #ccc;}
</style>
</head>
<body>
<div>
<div style="position: relative;">
<div id="div2">
</div>
</div>
</div>
<script>
window.onload = function () {
var oDiv = document.getElementById('div2')
function offset(obj) {
var leftToBody = obj.offsetLeft; //leftToBody = obj 的 offsetLeft 加上 所有定位父级的 offsetLeft
var TopToBody = obj.offsetTop;
var positionParent = obj.offsetParent;
while (positionParent) { //body.offsetParent = null，为假
leftToBody += positionParent.offsetLeft;
TopToBody += positionParent.offsetTop;
positionParent = positionParent.offsetParent
}
return {
left: leftToBody,
top: TopToBody
}
}
console.log(offset(oDiv)) //{left: 300,top: 300}
}
</script>
</body>
