Of Stack

Differences of clientWidth offsetWidth and scrollWidth in JavaScript

  • 2021-10-25 05:46:22
  • OfStack

1. Concepts

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

Element. clientWidth Content + Inner Margins-Scroll Bar-Excluding Borders and Outer Margins = = Visual Content
Element. scrollWidth Content + Inner Margins + Overflow Dimensions----Excluding borders and outer margins = = Actual Content
Element. offsetWidth element width (content + inner margin + border + scroll bar) = = whole, whole control

2. Examples

1. There are only horizontal 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 {
   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); // Width of content: 1000px
 console.log("child.clientWidth:", child.clientWidth); // Content + Inner margin - Scroll bar ----- Excluding borders and outer margins  ==  Visual content  1020px
 console.log("child.scrollWidth:", child.scrollWidth); // Content + Inner margin + Overflow size ----- Excluding borders and outer margins  == Actual content  1020px
 console.log("child.offsetWidth:", child.offsetWidth); // Width of the element (content + Inner margin + Border + Scroll Bar) == Whole, whole control   1060px

 var father = document.getElementById("father");
 console.log("father.width:", window.getComputedStyle(father).width); // Width of content: 300px
 console.log("father.clientWidth:", father.clientWidth); // Content + Inner margin - Scroll bar ----- Excluding borders and outer margins  ==  Visual content  320px
 console.log("father.scrollWidth:", father.scrollWidth); // Content + Inner margin + Overflow size ----- Excluding borders and outer margins  == Actual content  1100px
 console.log("father.offsetWidth:", father.offsetWidth); // Width of the element (content + Inner margin + Border + Scroll Bar) == Whole, whole control   340px
</script>
</body>
</html>

In the case of only horizontal scroll bars, the parent element is affected by the width of the child element, and the other more special is scrollWidth.

The parent element's scrollWidth is content+padding+border+margin on the side of child element 1 + padding on the side of parent element 1.

2. There are horizontal scroll bars 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); // Width of content: 1000px
 console.log("child.clientWidth:", child.clientWidth); // Content + Inner margin - Scroll bar ----- Excluding borders and outer margins  ==  Visual content  1020px
 console.log("child.scrollWidth:", child.scrollWidth); // Content + Inner margin + Overflow size ----- Excluding borders and outer margins  == Actual content  1020px
 console.log("child.offsetWidth:", child.offsetWidth); // Width of the element (content + Inner margin + Border + Scroll Bar) == Whole, whole control   1060px

 var father = document.getElementById("father");
 console.log("father.width:", window.getComputedStyle(father).width); // Width of content: 285px
 console.log("father.clientWidth:", father.clientWidth); // Content + Inner margin - Scroll bar ----- Excluding borders and outer margins  ==  Visual content  305px
 console.log("father.scrollWidth:", father.scrollWidth); // Content + Inner margin + Overflow size ----- Excluding borders and outer margins  == Actual content  1100px
 console.log("father.offsetWidth:", father.offsetWidth); // Width of the element (content + Inner margin + Border + Scroll Bar) == Whole, whole control   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 details of the differences between clientWidth, offsetWidth and scrollWidth in Element. Please pay attention to other related articles on this site for more information about the differences between clientWidth, offsetWidth and scrollWidth!

Related articles: