125 views
JavaScript offsetHeight
The offsetHeight property in JavaScript is used to get the height of an element, including its vertical padding, border, and optional horizontal scrollbar (if any), but excluding the margin.
Here’s an example of how to use the offsetHeight property:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.box {
width: 200px;
height: 100px;
border: 1px solid black;
padding: 10px;
}
</style>
<script>
window.onload = function() {
var element = document.getElementById("myElement");
var height = element.offsetHeight;
console.log("Element height: " + height + "px");
};
</script>
</head>
<body>
<div id="myElement" class="box">Hello, world!</div>
</body>
</html>In this example, the offsetHeight property is used to retrieve the height of the <div> element with the id “myElement”. The height value includes the element’s content height (100px) plus its padding (10px) and border (1px on each side), resulting in a total height of 112px. The value is then logged to the console.
Note that the offsetHeight property returns the height value as an integer, without the “px” unit.