[英]How to get document height and width without using jquery
How to get document height and width in pure javascript ie without using jquery .如何在纯javascript中获取文档高度和宽度,即不使用jquery 。
I know about $(document).height()
and $(document).width()
, but I want to do this in javascript .我知道$(document).height()
和$(document).width()
,但我想在javascript中执行此操作。
I meant page's height and width.我的意思是页面的高度和宽度。
var height = document.body.clientHeight;
var width = document.body.clientWidth;
Check:this article for better explanation.检查:这篇文章以获得更好的解释。
Even the last example given onhttp://www.howtocreate.co.uk/tutorials/javascript/browserwindow is not working on Quirks mode.即使是在http://www.howtocreate.co.uk/tutorials/javascript/browserwindow上给出的最后一个例子也不能在 Quirks 模式下工作。 Easier to find than I thought, this seems to be the solution(extracted from latest jquery code):比我想象的更容易找到,这似乎是解决方案(从最新的 jquery 代码中提取):
Math.max(
document.documentElement["clientWidth"],
document.body["scrollWidth"],
document.documentElement["scrollWidth"],
document.body["offsetWidth"],
document.documentElement["offsetWidth"]
);
just replace Width for "Height" to get Height.只需将宽度替换为“高度”即可获得高度。
This is a cross-browser solution:这是一个跨浏览器的解决方案:
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
您应该使用getBoundingClientRect
因为它通常可以跨浏览器工作,并在边界矩形上为您提供亚像素精度。
elem.getBoundingClientRect()
Get document size without jQuery在没有 jQuery 的情况下获取文档大小
document.documentElement.clientWidth
document.documentElement.clientHeight
And use this if you need Screen size如果您需要屏幕尺寸,请使用它
screen.width
screen.height
This should work for all browsers/devices:这应该适用于所有浏览器/设备:
function getActualWidth()
{
var actualWidth = window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth ||
document.body.offsetWidth;
return actualWidth;
}
You can try also:你也可以试试:
document.body.offsetHeight
document.body.offsetWidth
如果要获取页面的全宽,包括溢出,请使用document.body.scrollWidth
。
window
is the whole browser's application window. window
是整个浏览器的应用程序窗口。 document
is the webpage shown that is actually loaded. document
是显示的实际加载的网页。
window.innerWidth
and window.innerHeight
will take scrollbars into account which may not be what you want. window.innerWidth
和window.innerHeight
将考虑滚动条,这可能不是您想要的。
document.documentElement
is the full webpage without the top scrollbar. document.documentElement
是没有顶部滚动条的完整网页。 document.documentElement.clientWidth
returns document width size without y scrollbar. document.documentElement.clientWidth
返回没有 y 滚动条的文档宽度大小。 document.documentElement.clientHeight
returns document height size without x scrollbar. document.documentElement.clientHeight
返回没有 x 滚动条的文档高度大小。
How to find out the document width and height very easily?如何很容易地找出文档的宽度和高度?
in HTML在 HTML 中<span id="hidden_placer" style="position:absolute;right:0;bottom:0;visibility:hidden;"></span>
in javascript在javascript中
var c=document.querySelector('#hidden_placer');
var r=c.getBoundingClientRect();
r.right=document width
r.bottom=document height`
You may update this on every window resize event, if needed.如果需要,您可以在每个窗口调整大小事件上更新它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.