一次搞懂clientWidth、clientHeight、clientLeft、clientTop

前言

之前对浏览器这些参数总是比较模棱两可这次下定决定搞清楚这边记录一下

---

clientWidth
clientHeight
clientLeft
clientTop

1.引入库

代码如下（示例）：

	<style>
			* {
				margin: 0;
				padding: 0;
			}
			.box {
			/* 	padding: 10px;
				box-sizing: border-box; */
				box-sizing: border-box;
				/* padding-top: 20px; */
				border-top: 20px solid;
				border-left: 20px solid;
				margin-left: 20px;
				width: 1000px;
				height: 1000px;
				background-color: #ccc;
			}
		</style>

<div class="box"></div>

let dom = document.querySelector('.box')


clientWidth 就是当前的dom元素的宽度

console.log('clientWidth----', dom.clientWidth)
console.log('clientHeight----',dom.clientHeight)
如果元素设置了padding 属性 clientWidth = clientWidth + padding * 2    clientHeight = clientHeight + padding * 2

如果元素设置了box-sizing: border-box; 属性  clientWidth = clientWidth - border * 2  clientHeight = clientHeight - border * 2



console.log('clientLeft---',dom.clientLeft)
console.log('clientTop---',dom.clientTop)
//clientLeft 针对左边的border 值 border-top: 20px solid;
//clientTop 针对上边的border 值border-left: 20px solid;
//  不受 box-sizing: border-box; 的影响