大家好，又见面了，我是你们的朋友全栈君。
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.net/163016.html原文链接：https://javaforall.net
![阅人有术[通俗易懂]](https://javaforall.net/wp-content/uploads/2020/11/2020110817443450-480x300.jpg)
