JS gets a summary of various widths and heights

client

clientHeight and clientWidth refer to the size of the client area of ​​the element, that is, visible content + padding
clientTop=boeder-top;clientLeft=border-left; (used to read the width and height of the element's 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 used to read the width and height of the border of the element
			console.log("clientHeight:"+sh,"clientWidth"+sw)
			//120=width(100)+padding(10)*2 The border value is not calculated. If there is no scroll axis---if there is, then subtract the scroll axis

offset

offsetHeight and offsetWidth are the external size of the element, ie border+padding+visible content
offsetTop and offsetLeft, to obtain these two values, you need to pass offsetParent

  • If the parent element of the current element is not CSS positioned (position is absolute or relative), offsetParent is body

  • If there is CSS positioning in the parent element of the current element, offsetParent takes the nearest parent element

			var oh=box.offsetHeight;
			var ow=box.offsetWidth;
			box.style.margin=10+"px";
			var oTop=box.offsetTop;
			console.log("offsetTop:"+oTop);//No positioning Refer to body
			console.log("offsetHeight:"+oh,"offsetWidth:"+ow);
			//128=width(100)+padding(10)+border(4)*2

scrll

scrllWidth and scrllHeight are the actual size of the element, that is, the actual content area + padding (the most used by God!!) can be read and written
scrllTop and scrllLeft are zero by default and only have value if there is a scroll bar

			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);
			//It reflects the actual size of the element, the actual content + padding


The following two methods are easy to understand and there is no effect map. Just copy the code directly into the editor and test it (the test is true)

window

console.log("window inner width: "+window.innerWidth);
console.log("window inner height: "+window.innerHeight);
console.log("window outer width: "+window.outerWidth);
console.log("Height outside the window: "+window.outerHeight);

Event

box.onmousemove = function (e) {
e=e||window.event;
//relative to the browser's valid area xy axis
box.innerHTML = "client:" + e.clientX + "," + e.clientY;
//The distance of the xy axis relative to the screen distance of the display
box.innerHTML = "screen:" + e.screenX + "," + e.screenX;
//relative to the xy axis of the page
box.innerHTML = "page:" + e.pageX + "," + e.pageY;
//The distance relative to the xy axis of the event source (element) does not add border value
box.innerHTML = "offset:" + e.offsetX + "," + e.offsetY;
}

The above is based on my own understanding, some summaries of the great gods on the Internet, and my own thoughts! If you see it at the end, give it a shot in the comment section. Many of them are still not well understood, I hope the gods from all walks of life can correct them

Tags: Javascript

Posted by j.smith1981 on Tue, 31 May 2022 13:19:33 +0530