Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- 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
The first question that comes to mind after reading this tutorial's title is offsetWidth, clientWidth, and scrollWidth return the width of the HTML, but what is the difference between them?
The difference between them is how much space they take on the web page. In this tutorial, we will learn about the different widths and different heights of HTML element.
OffsetWidth, ClientWidth, ScrollWidth
offsetWidth − It 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 − It returns the actual width + padding of the element. It doesn’t include the margin, border, or scrollbar width. It is an inner width of an HTML element.
scrollWidth − It returns the total width of the scrollable content, including the padding but not a border, margin, scrollbar, etc.
Syntax
Users can follow the syntax below to use the is offsetWidth, clientWidth, and scrollWidth properties in JavaScript.
element.scrollWidth; element.clientWidth; element.scrollWidth;
In the above syntax, the element is an HTML element for which we require to find the width.
Example 1
We created the div element in the example below and added the text content. Also, we set the fixed width for the div element and applied CSS to make it horizontally scrollable.
In JavaScript, we accessed the div element and used the offsetWidth, clientWidth, and scrollWidth properties to get the respective width. In the output, users can observe that offsetWidth is equal to the 330 pixels (300 px actual width + 10 px left padding + 10 px right padding + 5 px left border + 5 px right border). The clientWidth is equal to 320 px, as it counts only actual width and padding but not border. The scrollWidth is 1549 px, measuring the width of scrollable content.
<html>
<head>
<style>
.element {
width: 300px;
padding: 10px;
border: 5px solid blue;
font-size: 2rem;
color: green;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
</style>
</head>
<body>
<h3> Using the <i> offsetWidth, clientWidth, scrollWidth </i> CSS properties to get different widths of an HTML element. </h3>
<div class = "element">
<p class="text"> Hello Users! 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>
var element = document.querySelector('.element');
var output = document.querySelector('#output');
output.innerHTML = "offsetWidth: " + element.offsetWidth + "<br>" +
"clientWidth: " + element.clientWidth + "<br>" +
"scrollWidth: " + element.scrollWidth;
</script>
</body>
</html>
Example 2
In the example below, we added the text content to the div element and made it horizontally scrollable, like the first example. Also, we created the input fields to take users' width, padding, and border-width.
In JavaScript, we access the input values and set the style of the HTML elements according to the value.
In the output, users can enter the input values and click on the get width button to recalculate the width of an element.
<html>
<head>
<style>
.element {
width: 300px;
padding: 10px;
border: 5px solid red;
font-size: 2rem;
color: pink;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
</style>
</head>
<body>
<h3> Using the <i> offsetWidth, clientWidth, scrollWidth </i> CSSproperties to get differnt widths of an HTML element </h3>
<div class = "element">
PHP is a popular server-side scripting language that is widely used to build dynamic websites and web applications. One of the key strengths of PHP is its ability to interact with databases, making it an ideal language for building content management systems, e-commerce websites, and other database-driven applications.
</div> <br>
<div>
<label for = "width"> Width: </label> <input type = "number" id = "width" value = "300">
<label for = "padding"> Padding: </label> <input type = "number" id = "padding" value = "10">
<label for = "border"> Border: </label> <input type = "number" id = "border" value = "5">
</div> <br> <br>
<div id = "output"> </div> <br> <br>
<button onclick = "getWidths()"> Get widths </button>
<script>
var element = document.querySelector('.element');
var output = document.querySelector('#output');
function getWidths() {
var width = document.querySelector('#width').value;
var padding = document.querySelector('#padding').value;
var border = document.querySelector('#border').value;
element.style.width = width + "px";
element.style.padding = padding + "px";
element.style.border = border + "px solid red";
output.innerHTML = "offsetWidth: " + element.offsetWidth + "<br>" +
"clientWidth: " + element.clientWidth + "<br>" +
"scrollWidth: " + element.scrollWidth;
}
getWidths();
</script>
</body>
</html>
OffsetHeight, ClientHeight, ScrollHeight
The offsetHeight, clientHeight, and scrollHeight properties are similar to the offsetWidth, clientWidth, and scrollWidth.
offsetHeight − It returns the total height of the element, including the actual height, padding, and border. It is the outer height of the element
clientHeight − It returns the sum of actual height and padding only. It is an inner height.
scrollHeight − It returns the height of the scrollable content, including the padding.
Syntax
Users can follow the syntax below to use the offsetHeight, clientHeight, and scrollHeight JavaScript properties.
element.scrollHeight; element.clientHeight; element.scrollHeight;
Example 3
In the example below, we added content to the div element and set overflow-y to scroll to make it vertically scrollable. In JavaScript, we used the offsetHeight, clientHeight, and scrollHeight properties to get the different heights of an HTML element.
In the output, offsetHeight height is 130 px, equal to the 100 px actual height + 10 px top padding + 10 px bottom padding + 5 px top border + 5 px bottom border. The clientheight is 120 px which is the sum of the actual width and padding. The scrollHeight is 343 px, equal to the height of scrollable content.
<html>
<head>
<style>
.element {
height: 100px;
width: 300px;
padding: 10px;
border: 5px solid blue;
font-size: 2rem;
color: green;
overflow-x: hidden;
overflow-y: auto;
}
</style>
</head>
<body>
<h3> Using the <i> offsetHeight, clientHeight, scrollHeight </i> CSS properties to get different Heights of an HTML element. </h3>
<div class = "element">
<p class = "text"> Hello Users! The Height of this div element is 300px. The left and right padding is 10px. The left and right border is 5px. </p>
</div> <br> <br>
<div id = "output"> </div>
<script>
var element = document.querySelector('.element');
var output = document.querySelector('#output');
output.innerHTML = "offsetHeight: " + element.offsetHeight + "<br>" +
"clientHeight: " + element.clientHeight + "<br>" +
"scrollHeight: " + element.scrollHeight;
</script>
</body>
</html>
In this tutorial, we learned to use the offsetWidth, clientWidth, and scrollWidth properties to get the widths of an HTML element. Also, we learned the difference between the offsetHeight, clientHeight, and scrollHeight properties returning the various heights of an HTML element.
5K+ Views
