大家好，又见面了，我是你们的朋友全栈君。

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/clientWidth

<style>
    * {
        padding: 0;
        margin: 0;
    }
    #div {
        width: 200px;
        height: 200px;
        padding: 10px;
        border: 5px solid lightgreen;
        margin: 20px;
        background: lightskyblue;
    }
</style>

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

clientWidth和clientHeigh clientTop和clientLeft

• clientWidth = width+左右padding
• clientHeigh = height + 上下padding

• clientTop = boder.top(上边框的宽度)
• clientLeft = boder.left(左边框的宽度)

const div = document.getElementById("div");
console.log("clientWidth: " + div.clientWidth);
console.log("clientHeight: " + div.clientHeight);
console.log("clientTop: " + div.clientTop);
console.log("clientLeft: " + div.clientLeft);

offsetWidth和offsetHight offsetTop和offsetLeft

• offsetWidth = width + 左右padding + 左右boder
• offsetHeith = height + 上下padding + 上下boder
• offsetTop：当前元素上边框外边缘到最近的已定位父级（offsetParent） 上边框内边缘的距离。如果父级都没有定位，则分别是到body顶部和左边的距离
• offsetLeft：当前元素左边框外边缘到最近的已定位父级（offsetParent） 左边框内边缘的距离。如果父级都没有定位，则分别是到body 顶部和左边的距离

https://blog.csdn.net/qq_42089654/article/details/80515916

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/163016.html原文链接：https://javaforall.cn