1. Fenêtre du navigateur

body{
  width: 2000px;
  height: 3000px;
}

document.body.clientWidth//输出2000

À l'heure actuelle, la largeur de la balise body obtenue de cette manière n'est pas la taille de la fenêtre d'affichage

document.documentElement.clientWidth 

Ce qui précède correspond à la largeur de la fenêtre du navigateur sans la largeur de la barre de défilement verticale (généralement 17), et n'inclut pas la bordure extérieure du navigateur.

window.innerWidth

Il s'agit de la largeur de la zone visible dans la fenêtre du navigateur. Lorsqu'il n'y a pas de barre de défilement verticale, c'est exactement la même chose que document.documentElement.clientWidth S'il y a une barre de défilement verticale, elle inclura la barre de défilement verticale. largeur (généralement 17).

Donc, si vous souhaitez obtenir la largeur de la barre de défilement verticale, vous pouvez :

window.innerWidth - document.documentElement.clientWidth

Deuxièmement, dans un certain élément p
html

  <p class="demo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora voluptatem similique earum ipsam expedita neque excepturi provident id. Quam, perspiciatis, cumque. Fugiat, iste, alias? Ea quo explicabo pariatur voluptatibus omnis.</p>

css

  .demo {
    width: 100px;
    height: 200px;
    overflow-y: scroll;
    padding: 10px;
  }

js

  let demo = document.querySelector('.demo');
  let noScrollWidth = demo.clientWidth; //不含垂直滚动条宽度
  let hasScrollWidth = demo.offsetWidth; //包含垂直滚动条宽度-整个p的实际宽度

  let scrollWidth = hasScrollWidth - noScrollWidth; //垂直滚动条的宽度
  console.log(scrollWidth);

Si vous souhaitez obtenir la largeur et la hauteur réelles d'un p, qu'il ait ou non une barre de défilement, vous devez utiliser offsetWidth, offsetHeight
Et clientWidth peut être utilisé pour calculer la largeur réelle de la barre de défilement verticale (parfois la largeur de la barre de défilement verticale est automatiquement définie, ce n'est pas la largeur par défaut 17)