一、瀏覽器視窗

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

document.body.clientWidth//输出2000

此時，這樣取得的body標籤的寬度，不是什麼視口大小

document.documentElement.clientWidth 

上面這個是不帶垂直滾動條寬度（一般為17）的瀏覽器視窗寬度，它也不包括瀏覽器外邊框。

window.innerWidth

這個則是瀏覽器視窗內可見區域寬度，當沒有垂直滾動條時，它與document.documentElement.clientWidth完全一樣，如果有垂直滾動條，它會包含垂直滾動條寬度（一般為17）。

所以如果要取得垂直捲軸寬度，可以：

window.innerWidth - document.documentElement.clientWidth

二，在某個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);

如果你要獲取某個p的實際寬高，不管它是否有滾動條，應該用offsetWidth、offserHeight
而clientWidth則可用於計算垂直滾動條實際寬度（有時垂直滾動條的寬度是自自定義的，就不是預設的17了）