document.documentElement.clientWidth - 返回错误值

Posted 2023-05-08

【中文标题】document.documentElement.clientWidth - 返回错误值

【英文标题】：document.documentElement.clientWidth - returns wrong value

【发布时间】：2020-05-27 19:55:31

【问题描述】：

我尝试读取当前窗口宽度。目前在 chrome 开发者工具中设置为 768。

但是如果我在控制台中调用document.documentElement.clientWidth，那么我会得到758。

---

对建议答案的回答：不，jquery 也没有解决它。如果我打电话给$(window).width();，那么我也会得到758。如果我打电话给$(document).width();，我会得到992

【问题讨论】：

这能回答你的问题吗？ clientHeight/clientWidth returning different values on different browsers

不，jquery 也没有解决它。如果我打电话给$(window).width()，我也会得到758。如果我打电话给$(document).width();，我会得到992

【参考方案1】：

MDN states那个

对于内联元素和没有 CSS 的元素，Element.clientWidth 属性为零；否则，它是以像素为单位的元素的内部宽度。它包括内边距，但不包括边框、边距和垂直滚动条（如果存在）。

我在您的屏幕截图上看到了一个滚动条。也许是这个原因？

【讨论】：

你是对的！我有一个正好 10px 宽的滚动条，这确实是原因。谢谢。

【参考方案2】：

Curveball 为我指明了正确的方向。我确实在使用宽度为 10px 的自定义滚动条，调用 document.documentElement.clientWidth 时会减去该滚动条。

/* Scrollbar */
  ::-webkit-scrollbar 
    width: 10px;
  

我解决了这个问题：

window.innerWidth;    // output: 768