【JavaScript】一篇弄懂offsetWidth、offsetHeight、offsetleft、offsetTop和offsetParent

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>