1. Browser window

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

document.body.clientWidth//输出2000

At this time, the width of the body tag obtained in this way is not the viewport size

document.documentElement.clientWidth 

The above is the browser window width without vertical scroll bar width (usually 17), and it does not include the browser outer border.

window.innerWidth

This is the width of the visible area in the browser window. When there is no vertical scroll bar, it is exactly the same as document.documentElement.clientWidth. If there is a vertical scroll bar, it will include the vertical scroll bar width (usually 17).

So if you want to get the vertical scroll bar width, you can:

window.innerWidth - document.documentElement.clientWidth

Second, in a certain p element
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);

If you want to get the actual width and height of a p, regardless of whether it has a scroll bar, you should use offsetWidth, offsetHeight
And clientWidth can be used to calculate the actual width of the vertical scroll bar (sometimes the width of the vertical scroll bar is automatically Defined, it is not the default 17)