大家好,又见面了,我是你们的朋友全栈君。
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
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/163016.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...