如何在不使用 jquery 的情况下获取文档的高度和宽度答案

【问题标题】：How to get document height and width without using jquery如何在不使用 jquery 的情况下获取文档的高度和宽度
【发布时间】：2011-03-30 09:37:42
【问题描述】：

如何在纯javascript 中获取文档的高度和宽度，即不使用jquery。
我知道$(document).height() 和$(document).width()，但我想在javascript 中执行此操作。

我指的是页面的高度和宽度。

【问题讨论】：

james.padolsey.com/javascript/get-document-height-cross-browser

标签： javascript jquery javascript javascript

【解决方案1】：

var height = document.body.clientHeight;
var width = document.body.clientWidth;

检查：this article 以获得更好的解释。

【讨论】：

这不是跨浏览器。您应该在发布之前对此进行测试。
@Iwazaru 感谢您指出这一点。看起来这个 4 岁的回复不是防弹的:)
好像it is cross-browser。
如果一个网站有一个边框，它会用这个解决方案而不是 jQuery 解决方案来消除宽度。不太可能成为身体的边界，但值得了解。 window.innerWidth 解决了这个问题
返回浏览器窗口的高度（如果你调整浏览器的高度，它会改变），而不是内容/网页的高度。

【解决方案2】：

即使在http://www.howtocreate.co.uk/tutorials/javascript/browserwindow 上给出的最后一个示例也无法在 Quirks 模式下运行。比我想象的更容易找到，这似乎是解决方案（从最新的 jquery 代码中提取）：

Math.max(
    document.documentElement["clientWidth"],
    document.body["scrollWidth"],
    document.documentElement["scrollWidth"],
    document.body["offsetWidth"],
    document.documentElement["offsetWidth"]
);

只需将“高度”替换为“宽度”即可获得高度。

【讨论】：

这应该是正确的答案。 clientWidth 并不总是具有正确的值。
clientWidth 的问题是它只能查看。 scrollWidth 包括从屏幕上泄漏的东西。至少，我在 2019 年的 Chrome 实验是这样的。
@StayCool 似乎最新的 jQuery 仍在使用这种方法来计算文档的高度/宽度，它给出的结果与 $(document).width() 相同。也许你追求的是 $(window).width() 之类的东西，在纯 JS 中，它在现代浏览器上只是 document.documentElement["clientWidth"]。

【解决方案3】：

这是一个跨浏览器的解决方案：

var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

【讨论】：

这是一个安全准确的做法
这是返回窗口的高度和宽度，而不是文档的高度和宽度

【解决方案4】：

您应该使用getBoundingClientRect，因为它通常跨浏览器工作并在边界矩形上为您提供亚像素精度。

elem.getBoundingClientRect()

【讨论】：

对于那些想知道支持的人：caniuse.com/#feat=getboundingclientrect
当我在 document.body 上使用它时返回高度 0
可能是因为你的身体身高为0。如果你不改变它的显示类型，默认情况下就是这种情况。在 DOM 检查器中检查它。

【解决方案5】：

不使用 jQuery 获取文档大小

document.documentElement.clientWidth
document.documentElement.clientHeight

如果您需要屏幕尺寸，请使用它

screen.width
screen.height

【讨论】：

【解决方案6】：

这应该适用于所有浏览器/设备：

function getActualWidth()
{
    var actualWidth = window.innerWidth ||
                      document.documentElement.clientWidth ||
                      document.body.clientWidth ||
                      document.body.offsetWidth;

    return actualWidth;
}

【讨论】：

window.innerWidth 是唯一一个在 Chrome 上打开开发工具时也是正确的

【解决方案7】：

你也可以试试：

document.body.offsetHeight
document.body.offsetWidth

【讨论】：

在窗口调整大小事件中使用这些时要小心。他们必须计算高度和宽度，这需要一段时间。

【解决方案8】：

如果要获取页面的全宽，包括溢出，请使用document.body.scrollWidth。

【讨论】：

这个解决方案是否跨浏览器？

【解决方案9】：

window 是整个浏览器的应用程序窗口。 document 是显示的实际加载的网页。

window.innerWidth 和 window.innerHeight 会考虑滚动条，这可能不是您想要的。

document.documentElement 是没有顶部滚动条的完整网页。 document.documentElement.clientWidth 返回不带 y 滚动条的文档宽度大小。 document.documentElement.clientHeight 返回不带 x 滚动条的文档高度大小。

【讨论】：

【解决方案10】：

如何很容易地找出文档的宽度和高度？

HTML
<span id="hidden_placer" style="position:absolute;right:0;bottom:0;visibility:hidden;"></span>

在 JavaScript 中

     var c=document.querySelector('#hidden_placer');

     var r=c.getBoundingClientRect();
     r.right=document width
     r.bottom=document height`

如果需要，您可以在每次调整窗口大小事件时更新它。

【讨论】：