07-client属性

<style>
        div{
            width: 100px;
            height: 100px;
            padding: 50px;
            border: 50px solid #000;
            background: red;
            background-clip: content-box;
        }
</style>

<div id="box"></div>

• clientWidth = 宽度 + 内边距

  • offsetWidth = 宽度 + 内边距 + 边框

• clientHeight = 高度 + 内边距

  • offsetHeight = 高度 + 内边距 + 边框

    let oDiv = document.querySelector("div");
    console.log(oDiv.clientWidth);  // 200
    console.log(oDiv.clientHeight); // 200

• clientLeft / clientTop: 左边框 和 顶部边框

  • offsetLeft / offsetTop: 距离第一个定位祖先元素偏移位 || body

    let oDiv = document.querySelector("div");
    console.log(oDiv.clientLeft);  // 50
    console.log(oDiv.clientTop);  // 50