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

Implementation of Webpack3+React16 code splitting

Project Background Recently, there is a project w...

Docker container monitoring principle and cAdvisor installation and usage instructions

It is very important to monitor the operating sta...

Installation and usage analysis of Portainer, a visual UI management tool for Docker

Portainer is an excellent Docker graphical manage...

How to set up jar application startup on CentOS7

Pitfalls encountered during project deployment Wh...

MySQL uses SQL statements to modify table names

In MySQL, you can use the SQL statement rename ta...

How to hide the version number and web page cache time in Nginx

Nginx optimization---hiding version number and we...

The effect of CSS dynamic gradient border rotating around the content area (example code)

Rendering After looking up relevant information o...

Mysql database scheduled backup script sharing

BackUpMysql.sh script #!/bin/bash PATH=/bin:/sbin...

MySQL trigger principle and usage example analysis

This article uses examples to explain the princip...

HTML discount price calculation implementation principle and script code

Copy code The code is as follows: <!DOCTYPE HT...

JavaScript implements click to change the image shape (transform application)

JavaScript clicks to change the shape of the pict...

JS realizes the case of eliminating stars

This article example shares the specific code of ...

Solution to the problem that a Linux modification of MySQL configuration does not take effect

background I have a project service that uses AWS...

A small question about the execution order of SQL in MySQL

I encountered a sql problem at work today, about ...

JavaScript to show and hide the drop-down menu

This article shares the specific code for JavaScr...