How to get document height and width without using jquery


Javascript 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 is not working on Quirks mode. Easier to find than I thought, this seems to be the solution(extracted from latest jquery code):


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.


Solution 5 - Javascript

Get document size without jQuery


And use this if you need Screen size


Solution 6 - Javascript

You can try also:


Solution 7 - Javascript

This should work for all browsers/devices:

function getActualWidth()
    var actualWidth = window.innerWidth ||
                      document.documentElement.clientWidth ||
                      document.body.clientWidth ||

    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?

<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.


All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionSarithaView Question on Stackoverflow
Solution 1 - JavascriptDambView Answer on Stackoverflow
Solution 2 - JavascriptDanView Answer on Stackoverflow
Solution 3 - JavascripthamidView Answer on Stackoverflow
Solution 4 - JavascriptEraView Answer on Stackoverflow
Solution 5 - JavascripttamasviktorView Answer on Stackoverflow
Solution 6 - JavascriptMihai FrentiuView Answer on Stackoverflow
Solution 7 - Javascriptuser937284View Answer on Stackoverflow
Solution 8 - JavascriptArlen BeilerView Answer on Stackoverflow
Solution 9 - Javascriptuser3798451View Answer on Stackoverflow
Solution 10 - JavascriptJoshy FrancisView Answer on Stackoverflow