Client Properties

var element = document.getElementById("GFG");
				var text = "";
				
				text += "ClientHeight: " + element.clientHeight
							+ "px" + "<br>";
				

				
				document.getElementById("demo").innerHTML = text;

element.clientLeft

var w = document.getElementById("myid");   
                /* Using clientTop property */
                var x = "Border-left-Width is: " 
                + w.clientLeft + "px<br>";
                document.getElementById("sudo").innerHTML = x;

element.clientTop

var w = document.getElementById("myid");

   
                /* Using clientTop property */
                var x = "Border-Top-Width is: " 
                + w.clientTop + "px<br>";
  
                document.getElementById("sudo").innerHTML = x;

element.clientWidth

var elmnt = document.getElementById("myDIV");
var txt = "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px";

var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";