How to get document height and width without using jquery
JavascriptJavascript Problem Overview
How to get document height and width in pure [tag:javascript] i.e without using [tag:jquery].
I know about $(document).height() and $(document).width(), but I want to do this in [tag:javascript].
I meant page's height and width.
Javascript Solutions
Solution 1 - Javascript
var height = document.body.clientHeight;
var width = document.body.clientWidth;
Check: this article for better explanation.
Solution 2 - Javascript
Even the last example given on http://www.howtocreate.co.uk/tutorials/javascript/browserwindow is not working on Quirks mode. Easier to find than I thought, this seems to be the solution(extracted from latest jquery code):
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.
Solution 3 - Javascript
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;
Solution 4 - Javascript
You should use getBoundingClientRect as it usually works cross browser and gives you sub-pixel precision on the bounds rectangle.
elem.getBoundingClientRect()
Solution 5 - Javascript
Get document size without jQuery
document.documentElement.clientWidth
document.documentElement.clientHeight
And use this if you need Screen size
screen.width
screen.height
Solution 6 - Javascript
You can try also:
document.body.offsetHeight
document.body.offsetWidth
Solution 7 - Javascript
This should work for all browsers/devices:
function getActualWidth()
{
var actualWidth = window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth ||
document.body.offsetWidth;
return actualWidth;
}
Solution 8 - Javascript
If you want to get the full width of the page, including overflow, use document.body.scrollWidth.
Solution 9 - Javascript
window is the whole browser's application window. document is the webpage shown that is actually loaded.
window.innerWidth and window.innerHeight will take scrollbars into account which may not be what you want.
document.documentElement is the full webpage without the top scrollbar. document.documentElement.clientWidth returns document width size without y scrollbar.
document.documentElement.clientHeight returns document height size without x scrollbar.
Solution 10 - Javascript
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>
in 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.