The difference between clientWidth, offsetWidth, scrollWidth in JavaScript

The difference between clientWidth, offsetWidth, scrollWidth in JavaScript

1. Concept

They are all attributes of Element, indicating the width of the element:

Element.clientWidth content + inner margin - scroll bar-----excluding borders and outer margins == visible content
Element.scrollWidth content + padding + overflow size-----excluding borders and margins == actual content
Element.offsetWidth The width of the element (content + padding + border + scroll bar) == the entire control

2. Examples

1. Only horizontal scroll bar

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Test scrollWidth, clientWidth, offsetWidth</title>
 <style type="text/css">
  body, html {
   margin: 0px;
   padding: 0px;
  }

  #father {
   width: 300px;
   overflow:auto;
   padding: 10px;
   background: rebeccapurple;
   border: 10px solid red;
   margin: 20px;
  }

  #child {
   height: 100px;
   width: 1000px;
   padding: 10px;
   border: 20px solid #ffcc99;
   margin: 30px;
  }
 </style>
</head>
<body>

<div id="father">
 <div id="child"></div>
</div>

<script type="text/javascript">
 var child = document.getElementById("child");
 console.log("child.width:", window.getComputedStyle(child).width); //Content width: 1000px
 console.log("child.clientWidth:", child.clientWidth); //Content + inner margin - scroll bar-----excluding borders and outer margins == visible content 1020px
 console.log("child.scrollWidth:", child.scrollWidth); //Content + padding + overflow size ----- excluding borders and margins == actual content 1020px
 console.log("child.offsetWidth:", child.offsetWidth); //The width of the element (content + padding + border + scroll bar) == the whole, the entire control is 1060px

 var father = document.getElementById("father");
 console.log("father.width:", window.getComputedStyle(father).width); //Content width: 300px
 console.log("father.clientWidth:", father.clientWidth); //Content + inner margin - scroll bar ----- does not include borders and outer margins == visible content 320px
 console.log("father.scrollWidth:", father.scrollWidth); //Content + padding + overflow size ----- excluding borders and margins == actual content 1100px
 console.log("father.offsetWidth:", father.offsetWidth); //The width of the element (content + padding + border + scroll bar) == the whole, the whole control is 340px
</script>
</body>
</html>

When there is only a horizontal scroll bar, the parent element is affected by the width of the child element. The other special one is scrollWidth.

The scrollWidth of the parent element is: the content of the child element + padding + border + margin on one side of the child element + padding on one side of the parent element.

2. There are horizontal and vertical scroll bars

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Test scrollWidth, clientWidth, offsetWidth</title>
 <style type="text/css">
  body, html {
   margin: 0px;
   padding: 0px;
  }

  #father {
   height: 50px;
   width: 300px;
   overflow:auto;
   padding: 10px;
   background: rebeccapurple;
   border: 10px solid red;
   margin: 20px;
  }

  #child {
   height: 100px;
   width: 1000px;
   padding: 10px;
   border: 20px solid #ffcc99;
   margin: 30px;
  }
 </style>
</head>
<body>

<div id="father">
 <div id="child"></div>
</div>

<script type="text/javascript">
 var child = document.getElementById("child");
 console.log("child.width:", window.getComputedStyle(child).width); //Content width: 1000px
 console.log("child.clientWidth:", child.clientWidth); //Content + inner margin - scroll bar-----excluding borders and outer margins == visible content 1020px
 console.log("child.scrollWidth:", child.scrollWidth); //Content + padding + overflow size ----- excluding borders and margins == actual content 1020px
 console.log("child.offsetWidth:", child.offsetWidth); //The width of the element (content + padding + border + scroll bar) == the whole, the entire control is 1060px

 var father = document.getElementById("father");
 console.log("father.width:", window.getComputedStyle(father).width); //Content width: 285px
 console.log("father.clientWidth:", father.clientWidth); //Content + inner margin - scroll bar ----- does not include borders and outer margins == visible content 305px
 console.log("father.scrollWidth:", father.scrollWidth); //Content + padding + overflow size ----- excluding borders and margins == actual content 1100px
 console.log("father.offsetWidth:", father.offsetWidth); //The width of the element (content + padding + border + scroll bar) == the whole, the whole control is 340px
</script>
</body>
</html>

The width of the parent element is: the content width of the parent element - the width of the scroll bar (approximately 15px)

The clientWidth of the parent element is: the content width of the parent element + the padding width of the parent element - the scroll bar width (approximately 15px)

The above is the detailed content of the difference between clientWidth, offsetWidth, and scrollWidth in Element. For more information about the difference between clientWidth, offsetWidth, and scrollWidth, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:
  • offsetWidth, clientWidth, innerWidth and related attribute methods in javascript
  • The difference between scrollWidth, clientWidth, offsetWidth
  • javascript scrollLeft,scrollWidth,clientWidth,offsetWidth full explanation
  • The difference between scrollWidth, clientWidth and offsetWidth
  • HTML: scrollLeft, scrollWidth, clientWidth, offsetWidth fully explained
  • What is the difference between this.clientWidth and this.offsetWidth
  • Some information about ClientWidth

<<:  Simple examples of creating stored procedures, triggers and using cursors in Navicat (pictures and text)

>>:  How to manage docker through UI

Recommend

The difference and advantages and disadvantages of Mysql primary key UUID and auto-increment primary key

introduction I used postgresql database for some ...

Detailed explanation of Docker container data volumes

What is Let’s first look at the concept of Docker...

Recommended plugins and usage examples for vue unit testing

Table of contents frame First-class error reporti...

Detailed explanation of how Node.js middleware works

Table of contents What is Express middleware? Req...

Docker builds jenkins+maven code building and deployment platform

Table of contents Docker Basic Concepts Docker in...

Docker Getting Started Installation Tutorial (Beginner Edition)

Doccer Introduction: Docker is a container-relate...

Example of how to deploy MySQL 8.0 using Docker

1. Refer to the official website to install docke...

Comparison of efficiency between single-table query and multi-table join query in MySql database

During this period of time, while working on a pr...

Javascript front-end optimization code

Table of contents Optimization of if judgment 1. ...

Summary of ten principles for optimizing basic statements in MySQL

Preface In the application of database, programme...

Detailed explanation of using Nodejs built-in encryption module to achieve peer-to-peer encryption and decryption

Encryption and decryption are an important means ...

Website design should pay attention to the sense of color hierarchy

Recently I have been saying that design needs to h...

A brief discussion on when MySQL uses internal temporary tables

union execution For ease of analysis, use the fol...

Solution for Tomcat to place configuration files externally

question When we are developing normally, if we w...

10 key differences between HTML5 and HTML4

HTML5 is the next version of the HTML standard. M...