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