Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
OffsetWidth, clientWidth, scrollWidth and Height, respectively in CSS
In this article, we will be understanding the difference between CSS offsetWidth, clientWidth, scrollWidth and difference between offsetHeight, clientHeight, scrollHeight since they return width and height of HTML element respectively.
CSS offsetWidth, clientWidth and scrollWidth
- offsetWidth: CSS offsetWidth property is the total width of the element, including the actual width, padding, border, and scrollbar in pixels. It doesn't include the margin in the width. It is an outer width of an HTML element.
- clientWidth: CSS clientWidth property returns the actual width and padding of the element. It doesn't include the margin, border, or scrollbar width. It is an inner width of an HTML element.
- scrollWidth: CSS scrollWidth property returns the total width of the scrollable content, including the padding but not a border, margin, scrollbar, etc.
Example
Here is an example where we have used HTML DOM element offsetWidth, clientWidth and scrollWidth properties to differentiate betweeen them.
<html>
<head>
<title>
CSS offsetWidth, clientWidth, scrollWidth
Properties
</title>
<style>
.element {
width: 300px;
padding: 5px;
border: 2px solid rgb(23, 2, 35);
font-size: 2rem;
color: green;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
</style>
</head>
<body>
<h3>
Using the offsetWidth, clientWidth, scrollWidth
CSS properties to get different widths of an
HTML element.
</h3>
<div class="element">
<p class="text">
The width of this div element is 300px.
The left and right padding is 10px.
The left and right border is 5px.
</p>
</div>
<div id="output"> </div>
<script>
let element = document.querySelector('.element');
document.getElementById("output").innerHTML =
"offsetWidth: " + element.offsetWidth
+ "<br>" +
"clientWidth: " + element.clientWidth
+ "<br>" +
"scrollWidth: " + element.scrollWidth;
</script>
</body>
</html>
CSS offsetHeight, clientHeight and scrollHeight
CSS offsetHeight, clientHeight, and scrollHeight properties are similar to the CSS offsetWidth, clientWidth, and scrollWidth.
- offsetHeight: CSS offsetHeight property returns the total height of the element, including the actual height, padding, and border. It is the outer height of the element.
- clientHeight: CSS clientHeight property returns the sum of actual height and padding only. It is an inner height.
- scrollHeight: CSS scrollHeight property returns the height of the scrollable content, including the padding.
Example
Here is an example where we have used HTML DOM element offsetHeight, clientHeight, and scrollHeight Properties to differentiate betweeen them.
<html>
<head>
<title>
CSS offsetHeight, clientHeight, scrollHeight
Properties
</title>
<style>
.element {
height: 100px;
width: 300px;
padding: 10px;
border: 2px solid rgb(23, 2, 35);
font-size: 2rem;
color: green;
overflow-x: hidden;
overflow-y: auto;
white-space: nowrap;
}
</style>
</head>
<body>
<h3>
Using the offsetHeight, clientHeight, scrollHeight
CSS properties to get different heights of an
HTML element.
</h3>
<div class="element">
<p class="text">
The height of this div element is 100px.
The left and right padding is 10px.
The left and right border is 5px.
</p>
</div>
<div id="output"> </div>
<script>
let element = document.querySelector('.element');
document.getElementById("output").innerHTML =
"offsetHeight: " + element.offsetHeight
+ "<br>" +
"clientHeight: " + element.clientHeight
+ "<br>" +
"scrollHeight: " + element.scrollHeight;
</script>
</body>
</html>
Conclusion
In this article, we learned and understood the difference between CSS offsetWidth, clientWidth, and scrollWidth properties to get the widths of an HTML element. Also, we learned the difference between CSS offsetHeight, clientHeight, and scrollHeight properties returning the various heights of an HTML element.
8K+ Views
