OffsetWidth, clientWidth, scrollWidth and Height in CSS-CSS Tutorial-php.cn

CSS 中的 OffsetWidth、clientWidth、scrollWidth 和 Height

The first question that comes to mind after reading the title of this tutorial is that offsetWidth, clientWidth and scrollWidth return the width of HTML, but what is the difference between them?

The difference between them is the amount of space they take up on the web page. In this tutorial, we will learn about the different widths and different heights of HTML elements.

Offset width, client width, scroll width

offsetWidth - It is the total width of the element, including actual width, padding, borders and scrollbars in pixels. It does not include margins in width. It is the outer width of the HTML element.
clientWidth - It returns the actual width of the element's padding. It does not include margins, borders, or scrollbar width. It is the internal width of the HTML element.
scrollWidth - It returns the total width of the scrollable content, including padding, but excluding borders, margins, scrollbars, etc.

grammar

Users can use the is offsetWidth, clientWidth and scrollWidth properties in JavaScript according to the following syntax.

element.scrollWidth;
element.clientWidth;
element.scrollWidth;

Copy after login

In the above syntax, the element is an HTML element and we need to find its width.

Example 1

We created the div element and added the text content in the example below. Additionally, we set a fixed width for the div element and applied CSS to make it horizontally scrollable.

In JavaScript, we access the div elements and use the offsetWidth, clientWidth and scrollWidth properties to get the respective widths. In the output, the user can observe that the offsetWidth is equal to 330 pixels (300 px actual width 10 px left padding 10 px right padding 5 px left border 5 px right border). clientWidth is equal to 320 px because it only counts the actual width and padding, not the borders. 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>

Copy after login

Example 2

In the example below, we add text content to a div element and make it horizontally scrollable, just like the first example. Additionally, we created input fields to get the user's width, padding, and border width.

In JavaScript, we access the input value and style the HTML element based on that value.

In the output, the user can enter the input value and click the "Get Width" button to recalculate the width of the 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>

Copy after login

Offset height, client height, scroll height

The offsetHeight, clientHeight and scrollHeight properties are similar to offsetWidth, clientWidth and scrollWidth.

offsetHeight - It returns the total height of the element, including actual height, padding and borders. It is the outer height of the element
clientHeight - It just returns the sum of the actual height and padding. This is an internal height.
scrollHeight - It returns the height of the scrollable content, including padding.

grammar

Users can use the offsetHeight, clientHeight and scrollHeight JavaScript properties according to the following syntax.

element.scrollHeight;
element.clientHeight;
element.scrollHeight;

Copy after login

Example 3

In the example below, we added content to a div element and set Overflow-y to scroll so that it scrolls vertically. In JavaScript, we use the offsetHeight, clientHeight and scrollHeight properties to get the different heights of HTML elements.

In the output, the offsetHeight height is 130 px, which is equal to 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 scroll height is 343 pixels, which is equal to the height of the 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>

Copy after login

In this tutorial, we learned how to use the offsetWidth, clientWidth and scrollWidth properties to get the width of an HTML element. Additionally, we learned the difference between the offsetHeight, clientHeight, and scrollHeight properties that return different heights of HTML elements.

The above is the detailed content of OffsetWidth, clientWidth, scrollWidth and Height in CSS. For more information, please follow other related articles on the PHP Chinese website!