Source Code: (back to article)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#divId {
height: 200px;
width: 350px;
padding: 20px;
margin: 25px;
border: 2px solid green;
}
</style>
</head>
<body>
<div id="divId">
<p>To get the height and width of element, including padding and border.</p>
<p id="demo"></p>
</div>
<button onclick="GetHeightWidth()">Click on button</button>
<script>
function GetHeightWidth() {
let elem = document.getElementById("divId");
let width = "Width: " + elem.offsetHeight + "px<br>";
let height = "Height: " + elem.offsetWidth + "px";
document.getElementById("demo").innerHTML = width + height;
}
</script>
</body>
</html>