[英]How to get document height and width without using jquery
如何在纯javascript中获取文档高度和宽度,即不使用jquery 。
我知道$(document).height()
和$(document).width()
,但我想在javascript中执行此操作。
我的意思是页面的高度和宽度。
var height = document.body.clientHeight;
var width = document.body.clientWidth;
检查:这篇文章以获得更好的解释。
即使是在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"]
);
只需将宽度替换为“高度”即可获得高度。
这是一个跨浏览器的解决方案:
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
您应该使用getBoundingClientRect
因为它通常可以跨浏览器工作,并在边界矩形上为您提供亚像素精度。
elem.getBoundingClientRect()
在没有 jQuery 的情况下获取文档大小
document.documentElement.clientWidth
document.documentElement.clientHeight
如果您需要屏幕尺寸,请使用它
screen.width
screen.height
这应该适用于所有浏览器/设备:
function getActualWidth()
{
var actualWidth = window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth ||
document.body.offsetWidth;
return actualWidth;
}
你也可以试试:
document.body.offsetHeight
document.body.offsetWidth
如果要获取页面的全宽,包括溢出,请使用document.body.scrollWidth
。
window
是整个浏览器的应用程序窗口。 document
是显示的实际加载的网页。
window.innerWidth
和window.innerHeight
将考虑滚动条,这可能不是您想要的。
document.documentElement
是没有顶部滚动条的完整网页。 document.documentElement.clientWidth
返回没有 y 滚动条的文档宽度大小。 document.documentElement.clientHeight
返回没有 x 滚动条的文档高度大小。
如何很容易地找出文档的宽度和高度?
在 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`
如果需要,您可以在每个窗口调整大小事件上更新它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.