javascript - 为什么 offsetWidth 显示不正确的值？

Question

这段代码是我写的。

当我添加滚动条时，我得到 403 作为 clientWidth，这似乎是真的:403px 用于内部内容 + 17px 用于滚动条。然后我得到 403 作为 offsetWidth，但 offsetWidth 必须包括滚动条宽度。因此我应该得到 403+17，而不是 403。

为什么我在 (*) 中得到 403？

let html = document.documentElement
console.log(window.innerWidth) // 420 on my test
console.log(html.clientWidth) // 420
console.log(html.offsetWidth) // 420

html.style.overflowY = 'scroll' // add scroll-bar
console.log('Window: ' + window.innerWidth) // Window: 420
console.log('clientWidth: ' + html.clientWidth) // clientWidth: 403
console.log('offsetWidth: ' + html.offsetWidth) // offsetWidth: 403 (*)

Answer 1

_{您差一点就找到我们了!但它就在那里……}

仔细看看 documentElement .

不包括滚动条!因此，获取网站宽度包括滚动条的唯一方法是window.innerWidth .

The read-only Window property innerWidth returns the interior width of the window in pixels. This includes the width of the vertical scroll bar, if one is present.

^{offsetWidth 的值将包括所有 elements 的滚动条除了 documentElement .}
offsetWidth的 documentElement包括滚动条，但它根本没有。这意味着 offsetWidth和 clientWidth是一样的。