How to Get Height and Width of the Element in JavaScript
- Use the CSS Box Model to Get Height and Width of the Element
-
Use
offsetWidthandoffsetHeightto Get Height & Width of the Element in JavaScript -
Use
clientWidthandclientHeightto Get Height & Width of the Element in JavaScript -
Use
scrolltWidthandscrollHeightto Get Height & Width of the Element in JavaScript
This tutorial talks about the width and height of an element and guides how we can get its height and width in JavaScript.
First, we must understand the CSS box model to learn about offsetWidth, offsetHeight, clientWidth, clientHeight, scrollWidth, and scrollHeight.
Use the CSS Box Model to Get Height and Width of the Element
The CSS box model refers to the layout and design of a web page. This box model wraps all the HTML elements.
Its four essential parts are listed below.
Margins: It is also a transparent area that clears some space outside the border.Borders: It is a boundary (border) around the padding & content.Padding: The padding is the transparent area that clears some space around the content. It is a distance between the actual content and the border.Content: The actual content is placed here; the content can be an image, text, or video.
Here is the image to visualize all four parts.
Use offsetWidth and offsetHeight to Get Height & Width of the Element in JavaScript
The offsetWidth and offsetHeight are the HTML element’s two properties used to get the height and width of the HTML element. The offsetHeight and offsetWidth are measured in pixels (px) and used to return the element’s layout height and width, respectively.
They output zero (0) if the elements are hidden. Remember, the width and height include padding and border.
Below are the formulas to calculate the offsetHeight and offsetWidth.
offsetWidth = Visible Content Width + Padding + Border + Vertical Scrollbar
offsetHeight = Visible Content Height + Padding + Border + Horinzal Scrollbar
See the following screenshot to visualize the above formulae.
Example Code:
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style offsetWidth and offsetHeight Property
</title>
<style>
.box {
width: 100px;
height: 100px;
border: 5px black solid;
padding: 1px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box"> </div>
<script>
let box = document.querySelector('.box');
let width = box.offsetWidth;
let height = box.offsetHeight;
console.log("offsetWidth = " + width);
console.log("offsetHeight = "+height);
</script>
</body>
</html>
Output:
"offsetWidth = 112"
"offsetHeight = 112"
Use clientWidth and clientHeight to Get Height & Width of the Element in JavaScript
The clientWidth and clientHeight are read-only properties that return the element’s actual width and height in pixels visible to the user. The clientWidth and clientHeight are calculated using the following formulae.
clientWidth = Visible Content Width + Padding
clientHeight = Visible Content Height + Padding
See the following screenshot to visualize the above formula.
Example Code:
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style clientWidth and clientHeight Property
</title>
<style>
.box {
width: 100px;
height: 100px;
border: 5px black solid;
padding: 1px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box"> </div>
<script>
let box = document.querySelector('.box');
let width = box.clientWidth;
let height = box.clientHeight;
console.log("clientWidth = " + width);
console.log("clientHeight = "+height);
</script>
</body>
</html>
Output:
"clientWidth = 102"
"clientHeight = 102"
Use scrolltWidth and scrollHeight to Get Height & Width of the Element in JavaScript
The element’s scrollWidth and scrollHeight are read-only properties that include the padding and the content’s width and height (visible and invisible due to overflow, both). The scrollWidth and scrollHeight are calculated using the following formulae.
scrollWidth = Content Width (visible and invisible both) + Padding
scrollHeight = Content Height (visible and invisible both) + Padding
Let’s implement all of the above widths and heights (offset, client, and scroll).
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>offsetWH,scrollWH,clientWH</title>
</head>
<body>
<button onclick="offsetWH()">Get Offset Width/Height</button>
<button onclick="clientWH()">Get Client Width/Height</button>
<button onclick="scrollWH()">Get Scroll Width/Height</button>
<div id="container">
<div id="items">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
</div>
<article id="display"></article>
</body>
</html>
CSS Code:
#container {
margin-top: 10px;
height: 200px;
width: 200px;
overflow: auto;
margin: 20px;
}
#items {
height: 400px;
width: 400px;
padding: 20px;
background-color: skyblue;
border: 1px solid green;
}
JavaScript Code:
function scrollWH() {
let item = document.getElementById('items');
let height = item.scrollHeight;
let width = item.scrollWidth;
document.getElementById('display').innerHTML = 'Scroll Height = ' + height +
'px' +
' Scroll Width = ' + width + 'px';
}
function offsetWH() {
let item = document.getElementById('items');
let height = item.offsetHeight;
let width = item.offsetWidth;
document.getElementById('display').innerHTML = 'Offset Height = ' + height +
'px' +
' Offset Width = ' + width + 'px';
}
function clientWH() {
let item = document.getElementById('items');
let height = item.clientHeight;
let width = item.clientWidth;
document.getElementById('display').innerHTML = 'Client Height = ' + height +
'px' +
' Client Width = ' + width + 'px';
}
Output:
