132

How to get document height and width in pure i.e without using .
I know about $(document).height() and $(document).width(), but I want to do this in .

I meant page's height and width.

1

11 Answers 11

149
var height = document.body.clientHeight;
var width = document.body.clientWidth;

Check: this article for better explanation.

5
  • 11
    This is not cross browser. You should have tested this before posting it.
    – user352353
    Mar 9, 2014 at 20:47
  • 14
    @Iwazaru Thanks for pointing that out. Looks like this 4 years old reply isn't bulletproof :)
    – Damb
    Mar 30, 2015 at 15:26
  • 6
    It seems it is cross-browser. Jan 14, 2019 at 20:31
  • If a website has a border it takes that off the width with this solution but not the jQuery solution. Unlikely to be a border on the body but worth knowing. window.innerWidth solves this
    – BritishSam
    Mar 11, 2019 at 14:59
  • This returns the height of the browser window (if you adjust the height of the browser it changes), not the height of the content/webpage.
    – Radmation
    Nov 8, 2019 at 20:36
63

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.

3
  • 1
    This should be the correct answer. clientWidth does not always have the right value.
    – Wildhammer
    Jul 17, 2019 at 18:53
  • 1
    problem with clientWidth is it is viewable only. scrollWidth includes things leaking off the screen. at least, this is true for my Chrome experiments in 2019.
    – StayCool
    Nov 6, 2019 at 11:49
  • @StayCool it seems that the most recent jQuery is still using this method for the document height/width calculation and it gives the same result as $(document).width(). Maybe you are after something like $(window).width() which in pure JS would be just document.documentElement["clientWidth"] on modern browsers.
    – Dan
    Nov 8, 2019 at 16:08
44

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;
2
  • This is a safe and accurate thing to do
    – Nan Zhou
    Apr 10, 2017 at 14:27
  • 5
    this is returning the window height and width, not the document height and width
    – Michael
    May 25, 2018 at 20:09
26

You should use getBoundingClientRect as it usually works cross browser and gives you sub-pixel precision on the bounds rectangle.

elem.getBoundingClientRect()
3
  • 1
    for those wondering about support: caniuse.com/#feat=getboundingclientrect Feb 28, 2017 at 21:38
  • this returns a height of 0 when i used it on document.body
    – Michael
    May 25, 2018 at 20:07
  • Probably because your body has height 0. If you don't change its display type that's the case by default. Check it in the DOM inspector.
    – user187676
    May 28, 2018 at 6:25
14

Get document size without jQuery

document.documentElement.clientWidth
document.documentElement.clientHeight

And use this if you need Screen size

screen.width
screen.height
8

You can try also:

document.body.offsetHeight
document.body.offsetWidth
1
  • 1
    Be careful of using these in things like window resize events. they have to calculate the height & width, which takes a while.
    – Miles
    Jul 24, 2014 at 19:48
8

This should work for all browsers/devices:

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

    return actualWidth;
}
1
  • window.innerWidth is the only one that is also correct when the dev tools are open on Chrome
    – Alex
    Sep 13, 2015 at 14:54
4

If you want to get the full width of the page, including overflow, use document.body.scrollWidth.

1
  • Is this solution cross browser?
    – callback
    Apr 20, 2016 at 10:49
2

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.

1

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.

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.