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


Answers:


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

检查: 本文可提供更好的解释。


9
这不是跨浏览器。在发布之前,您应该已经对此进行了测试。

12
@Iwazaru感谢您指出这一点。看起来这4年的回复不是防弹的:)
Damb 2015年


如果网站有边框,则使用此解决方案可以消除边框的宽度,但可以使用jQuery解决方案。不可能成为身体的边界,但值得了解。window.innerWidth解决了这个问题
BritishSam

这将返回浏览器窗口的高度(如果您调整浏览器的高度,它会更改),而不是内容/网页的高度。
Radmation

56

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

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


1
这应该是正确的答案。clientWidth并不总是具有正确的值。
野蛮锤

clientWidth的问题是它仅可见。scrollWidth包括从屏幕泄漏的内容。至少,这对于我在2019
。– StayCool

@StayCool似乎最新的jQuery仍在使用此方法进行文档高度/宽度计算,并且给出的结果与相同$(document).width()。也许您正在追求像$(window).width()在纯JS中只是document.documentElement["clientWidth"]在现代浏览器上那样的东西。

38

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

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

这是一件安全又准确的事情
Nan Zhou

1
这是返回窗口的高度和宽度,而不是文档的高度和宽度
Michael,

25

您应该使用getBoundingClientRect它,因为它通常可以在跨浏览器中使用,并在边界矩形上为您提供亚像素精度

elem.getBoundingClientRect()


当我在document.body上使用它时,它返回高度为0
迈克尔

可能是因为您的身体的高度为0。如果不更改其显示类型,默认情况下就是这种情况。在DOM检查器中检查它。
埃里克·艾格纳

11

在没有jQuery的情况下获取文档大小

document.documentElement.clientWidth
document.documentElement.clientHeight

如果需要屏幕尺寸,请使用此选项

screen.width
screen.height

8

您也可以尝试:

document.body.offsetHeight
document.body.offsetWidth

1
在诸如窗口调整大小事件之类的东西中使用它们时要小心。他们必须计算高度和宽度,这需要一段时间。
英里

8

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

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

    return actualWidth;
}

window.innerWidth是唯一的一个,这也是正确的,当开发者工具使用的是Chrome开放
亚历克斯


1

如何轻松找出文件的宽度和高度?

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

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


0

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

window.innerWidthwindow.innerHeight会考虑滚动条,这可能不是您想要的。

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.