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

如何在纯文本中获取文档高度和宽度，即无需使用。
我知道

$（document）.height（）

和

$（document）.width（）

，但我想在中这样做

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

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

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

您也可以尝试：

document.body.offsetHeight
document.body.offsetWidth

---

即使是上给出的最后一个示例也不适用于怪癖模式。比我想象的更容易找到，这似乎是解决方案（摘自最新jquery代码）：

---

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

您应该使用

getBoundingClientRect

，因为它通常跨浏览器工作，并为边界矩形提供亚像素精度

elem.getBoundingClientRect()

---

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

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

    return actualWidth;
}

---

如果要获取页面的全宽（包括溢出），请使用

不使用jQuery获取文档大小

document.documentElement.clientWidth
document.documentElement.clientHeight

如果需要屏幕大小，请使用此选项

screen.width
screen.height

---

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

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

---

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

在HTML中

在javascript中

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

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

---

如果需要，您可以在每次调整窗口大小事件中更新此设置。

窗口是整个浏览器的应用程序窗口<代码>文档

是显示的实际加载的网页

window.innerWidth

和

window.innerHeight

将考虑可能不是您想要的滚动条

document.documentElement

是没有顶部滚动条的完整网页

document.documentElement.clientWidth

返回不带y滚动条的文档宽度大小。

---

document.documentElement.clientHeight

返回不带x滚动条的文档高度大小。

这不是跨浏览器。您应该在发布之前对其进行测试。@Iwazaru感谢您指出这一点。看起来这个4年前的回复不是防弹的：）看起来是这样。如果一个网站有一个边框，它会用这个解决方案而不是jQuery解决方案来减少宽度。不太可能是身体的边界，但值得知道<代码>窗口。innerWidth解决了这个问题。它返回浏览器窗口的高度（如果您调整浏览器的高度，它会改变），而不是内容/网页的高度。请注意在窗口调整大小事件中使用这些值。他们必须计算高度和宽度，这需要一段时间。window.innerWidth是唯一一个在ChromeIs上打开开发工具时也正确的解决方案。此解决方案是跨浏览器的吗？对于那些想知道支持的人：当我在document.body上使用它时，它返回的高度为0，可能是因为您的body的高度为0。如果不更改其显示类型，默认情况下就是这样。在DOM检查器中检查它。这是一件安全而准确的事情。这是返回窗口高度和宽度，而不是文档高度和宽度。这应该是正确的答案。clientWidth的值并不总是正确的。clientWidth的问题是它只能查看。scrollWidth包括从屏幕上泄漏的内容。至少在2019年我的Chrome实验中是这样的。@StayCool最近的jQuery似乎仍在使用此方法计算文档的高度/宽度，它给出的结果与

$（document.width（）

相同。也许你想要的是像

$（window.width（）

这样的东西，在纯JS中，它在现代浏览器上就是

document.documentElement[“clientWidth”]

。

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

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