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

Question

如何在纯JavaScript中获取文档高度和宽度,即不使用jquery.
我知道$(document).height()和$(document).width(),但我想在javascript中这样做.

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

Answer 1

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

检查: 本文为了更好的解释.

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;
}