How to get document height and width in pure javascript i.e without using jquery.
I know about $(document).height()
and $(document).width()
, but I want to do this in javascript.
I meant page's height and width.
How to get document height and width in pure javascript i.e without using jquery.
I know about $(document).height()
and $(document).width()
, but I want to do this in javascript.
I meant page's height and width.
var height = document.body.clientHeight;
var width = document.body.clientWidth;
Check: this article for better explanation.
window.innerWidth
solves this
Mar 11, 2019 at 14:59
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.
$(document).width()
. Maybe you are after something like $(window).width()
which in pure JS would be just document.documentElement["clientWidth"]
on modern browsers.
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;
You should use getBoundingClientRect
as it usually works cross browser and gives you sub-pixel precision on the bounds rectangle.
elem.getBoundingClientRect()
Get document size without jQuery
document.documentElement.clientWidth
document.documentElement.clientHeight
And use this if you need Screen size
screen.width
screen.height
You can try also:
document.body.offsetHeight
document.body.offsetWidth
This should work for all browsers/devices:
function getActualWidth()
{
var actualWidth = window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth ||
document.body.offsetWidth;
return actualWidth;
}
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.
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.
Use this:
var w = window.innerWidth;
var h = window.innerHeight;
It gets the browser window width and height. This has more info: https://www.w3schools.com/howto/howto_js_get_current_window.asp
<!DOCTYPE html>
<html>
<body>
<h2>Get the size of the current screen/window</h2>
<p>The example displays the browser window's height and width: (NOT including toolbars/scrollbars)
<p id="demo"></p>
<script>
var w = window.innerWidth;
var h = window.innerHeight;
var x = document.getElementById("demo");
x.innerHTML = "Code snippet width: " + w + ", height: " + h + ".";
</script>
</body>
</html>
Try it here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_get_current_window