JS获取各种宽度高度的总结

client

clientHeight与clientWidth指的是元素的客户区大小，即 可见内容+padding
clientTop=boeder-top;clientLeft=border-left;(用来读取元素的border的宽度和高度的)

			#box{
				width: 100px;
				height: 100px;
				border: 4px solid #666666;
				background: greenyellow;
				padding: 10px;
				overflow: scroll;
			}
			var box=document.getElementById('box');
			var sh=box.clientHeight;//120px
			var sw=box.clientWidth;//120px
			var cTop=box.clientTop;
			box.style.marginTop=10+"px";
			console.log("clientTop:"+cTop);//4  用来读取元素的border的宽度和高度的
			console.log("clientHeight:"+sh,"clientWidth"+sw)
			//120=width(100)+padding(10)*2  不计算border值  无滚动轴情况下---有则减去滚动轴

offset

offsetHeight与offsetWidth是元素的外在大小，即border+padding+可见内容
offsetTop与offsetLeft，获得这两个值需要通过offsetParent

• 如果当前元素的父元素没有进行CSS定位（position为absolute或relative），offsetParent为body

• 假如当前元素的父级元素中有CSS定位，offsetParent取最近的那个父级元素
  

			var oh=box.offsetHeight;
			var ow=box.offsetWidth;
			box.style.margin=10+"px";
			var oTop=box.offsetTop;
			console.log("offsetTop:"+oTop);//无定位 参照body
			console.log("offsetHeight:"+oh,"offsetWidth:"+ow);
			//128=width(100)+padding(10)+border(4)*2

scrll

scrllWidth与scrllHeight是元素的实际大小，即实际内容区+padding（大神说用的最多的！！）可读写
scrllTop与scrllLeft默认情况下是零有滚动条才有值

			var scw=box.scrollWidth;
			var sch=box.scrollHeight;
			box.style.margin=10+"px";
			var sstop=box.scrollTop;
			var ssleft=box.scrollLeft
			console.log("scrollTop:"+sstop,"scrollLeft:"+ssleft);
			console.log("scrollWidth:"+scw,"scrollHeight"+sch);
			//反映的是元素实际的大小，实际内容+padding

下面两种方法易理解就没有贴效果图了，直接代码复制到编辑器里面测试就好了（测试得真知）

window

console.log(“window内部的宽度:”+window.innerWidth);
console.log(“window内部的高度:”+window.innerHeight);
console.log(“window外部的宽度:”+window.outerWidth);
console.log(“window外部的高度:”+window.outerHeight);

Event

box.onmousemove = function (e) {
e=e||window.event;
//相对于浏览器的有效区域xy轴
box.innerHTML = “client:” + e.clientX + “,” + e.clientY;
//相对于显示器的屏幕距离的xy轴的距离
box.innerHTML = “screen:” + e.screenX + “,” + e.screenX;
//相对于页面的xy轴
box.innerHTML = “page:” + e.pageX + “,” + e.pageY;
//相对于事件源（元素）的xy轴的距离不加border值
box.innerHTML = “offset:” + e.offsetX + “,” + e.offsetY;
}

以上依照着自己的理解，和网上大神们的一些总结，外加自己实践出来的想！如果你看到了最后就在评论区喷一下吧。很多还是理解不到位的，希望各路大神纠正一下