Javascript 如何在不使用jquery的情况下获取文档的高度和宽度
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/5484578/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get document height and width without using jquery
提问by Saritha
How to get document height and width in pure javascripti.e without using jquery.
I know about $(document).height()
and $(document).width()
, but I want to do this in javascript.
如何在纯javascript 中获取文档高度和宽度,即不使用jquery。
我知道$(document).height()
and $(document).width()
,但我想在javascript 中做到这一点。
I meant page's height and width.
我的意思是页面的高度和宽度。
回答by Damb
var height = document.body.clientHeight;
var width = document.body.clientWidth;
Check: this articlefor better explanation.
检查: 这篇文章以获得更好的解释。
回答by Dan
Even the last example given on http://www.howtocreate.co.uk/tutorials/javascript/browserwindowis not working on Quirks mode. Easier to find than I thought, this seems to be the solution(extracted from latest jquery code):
即使在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"]
);
just replace Width for "Height" to get Height.
只需将“高度”替换为“宽度”即可获得高度。
回答by hamid
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;
回答by Erik Aigner
You should use getBoundingClientRect
as it usually works cross browserand gives you sub-pixel precisionon the bounds rectangle.
您应该使用getBoundingClientRect
它,因为它通常可以跨浏览器工作,并在边界矩形上为您提供亚像素精度。
elem.getBoundingClientRect()
回答by tamasviktor
Get document size without jQuery
在没有 jQuery 的情况下获取文档大小
document.documentElement.clientWidth
document.documentElement.clientHeight
And use this if you need Screen size
如果您需要屏幕尺寸,请使用它
screen.width
screen.height
回答by Mihai Frentiu
You can try also:
你也可以试试:
document.body.offsetHeight
document.body.offsetWidth
回答by user937284
This should work for all browsers/devices:
这应该适用于所有浏览器/设备:
function getActualWidth()
{
var actualWidth = window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth ||
document.body.offsetWidth;
return actualWidth;
}
回答by Arlen Beiler
If you want to get the full width of the page, including overflow, use document.body.scrollWidth
.
如果要获取页面的全宽(包括溢出),请使用document.body.scrollWidth
.
回答by Joshy Francis
How to find out the document width and height very easily?
如何很容易地找出文档的宽度和高度?
in HTML<span id="hidden_placer" style="position:absolute;right:0;bottom:0;visibility:hidden;"></span>
在 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.
如果需要,您可以在每个窗口调整大小事件上更新它。