How to get document height and width without using jquery

Question

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.

http://james.padolsey.com/javascript/get-document-height-cross-browser/ — Klemen Tusar, Dec 18 '14 at 11:58

Damb · Answer 1 · 2013-10-18T11:08:30.480

143

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

Check: this article for better explanation.

edited Oct 18 '13 at 11:08

answered Mar 30 '11 at 09:41

Damb

14,410
6
47
49

11

This is not cross browser. You should have tested this before posting it. – Mar 09 '14 at 20:47
14

@Iwazaru Thanks for pointing that out. Looks like this 4 years old reply isn't bulletproof :) – Damb Mar 30 '15 at 15:26
4

It seems [it is cross-browser](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight#Browser_compatibility). – MAChitgarha Jan 14 '19 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 '19 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 08 '19 at 20:36

score 62 · Answer 2 · edited Feb 02 '17 at 09:10

62

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.

edited Feb 02 '17 at 09:10

Denilson Sá Maia

47,466
33
109
111

answered May 10 '11 at 09:15

Dan

1,112
9
15

1

This should be the correct answer. clientWidth does not always have the right value. – Wildhammer Jul 17 '19 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 06 '19 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 08 '19 at 16:08

score 45 · Answer 3 · answered Apr 19 '16 at 07:18

45

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;

answered Apr 19 '16 at 07:18

hamid

852
11
27

This is a safe and accurate thing to do – Nan Zhou Apr 10 '17 at 14:27
4

this is returning the window height and width, not the document height and width – Michael May 25 '18 at 20:09

score 26 · Answer 4 · edited Jul 07 '22 at 13:45

26

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

elem.getBoundingClientRect()

edited Jul 07 '22 at 13:45

Henry Ecker

34,399
18
41
57

answered Jan 30 '14 at 11:03

1

for those wondering about support: http://caniuse.com/#feat=getboundingclientrect – Mike Gleason jr Couturier Feb 28 '17 at 21:38
this returns a height of 0 when i used it on document.body – Michael May 25 '18 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. – May 28 '18 at 06:25

score 13 · Answer 5 · answered Oct 21 '15 at 11:41

13

Get document size without jQuery

document.documentElement.clientWidth
document.documentElement.clientHeight

And use this if you need Screen size

screen.width
screen.height

answered Oct 21 '15 at 11:41

tamasviktor

131
1
5

score 8 · Answer 6 · answered Mar 04 '15 at 08:31

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;
}

answered Mar 04 '15 at 08:31

user937284

2,454
6
25
29

window.innerWidth is the only one that is also correct when the dev tools are open on Chrome – Alex Sep 13 '15 at 14:54

score 8 · Answer 7 · answered Mar 30 '11 at 09:42

8

You can try also:

document.body.offsetHeight
document.body.offsetWidth

answered Mar 30 '11 at 09:42

Mihai Frentiu

1,602
1
10
9

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 '14 at 19:48

score 4 · Answer 8 · answered Mar 12 '15 at 21:58

4

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

answered Mar 12 '15 at 21:58

Arlen Beiler

15,336
34
92
135

Is this solution cross browser? – callback Apr 20 '16 at 10:49

score 2 · Answer 9 · answered Jul 08 '20 at 12:07

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.

score 1 · Answer 10 · answered Sep 18 '18 at 08:47

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.

score 0 · Answer 11 · answered Mar 17 '23 at 00:57

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

How to get document height and width without using jquery

11 Answers11

Linked

Related