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

Question

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

我的意思是页面的高度和宽度。

Answer 1

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

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

Answer 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"]
);

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

Answer 3

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

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

Answer 4

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

elem.getBoundingClientRect()

Answer 5

获取没有jQuery的文档大小

document.documentElement.clientWidth
document.documentElement.clientHeight

如果您需要屏幕尺寸

，请使用此选项

screen.width
screen.height

Answer 6

您也可以尝试：

document.body.offsetHeight
document.body.offsetWidth

Answer 7

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

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

    return actualWidth;
}

Answer 8

如果您想获得页面的整个宽度，包括溢出，请使用document.body.scrollWidth。

Answer 9

如何轻松找到文档的宽度和高度？

在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`

如果需要，您可以在每个窗口调整大小事件上进行更新。

Answer 10

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

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

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