What is the difference between offsetHeight and clientHeight ?
OffsetHeight: It is the property that helps to measure the visible height of an element in terms of pixels including the CSS properties like element visible content, vertical padding, border, and scrollbar but not top and bottom margin.
offsetHeight = Visible content + padding + border + scrollbar
ClientHeight: It is the property that helps to measure the inner height of an element in terms of pixels including the CSS properties like padding but not the horizontal scrollbar height, border, or margin.
clientHeight = Visible content + padding
Example:
<!DOCTYPE html> < html > < head > < title > What is the difference between offsetHeight and clientHeight? </ title > < style > h1 { color:green; } #GFG { height: 200px; width: 300px; padding: 20px; margin: 20px; border: 10px solid black; overflow-x:scroll; overflow-y:scroll; text-align:justify; } #Beginner { font-weight:bold; color:green; } </ style > </ head > < body > < center > < h1 >w3wiki</ h1 > < h2 >OffsetHeight and ClientHeight</ h2 > < button onclick = "myBeginner()" > Click Here! </ button > < div id = "GFG" > This course is focused on Data Structures & Algorithms and will help you to prepare for product-based companies like Microsoft, Amazon, Adobe, etc. This is an online learning program which can be completed according to your pace. The course curriculum has been divided into 10 weeks where you can practice the question & attempt the Contest according to your time convenience. The course content includes pre-recorded premium Video lectures & programming questions for practice. You will learn algorithmic techniques for solving various computational problems and will implement more than 200 algorithmic coding problems. </ div > < div id = "Beginner" ></ div > < script > function myBeginner() { var element = document.getElementById("GFG"); var text = ""; text += "ClientHeight: " + element.clientHeight + "px" + "< br >"; text += "OffsetHeight: " + element.offsetHeight + "px" + "< br >< br >"; text += "ClientWidth: " + element.clientWidth + "px" + "< br >"; text += "OffsetWidth: " + element.offsetWidth + "px"; document.getElementById("Beginner").innerHTML = text; } </ script > </ center > </ body > </ html > |
Output:
- Before Click on the Button:
- After Click on the Button: