How to get document height and width without using jquery

Question

How to get document height and width in pure javascript ie 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.

Answer 1

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

Check:this article for better explanation.

Answer 2

Even the last example given onhttp://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.

Answer 3

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;

Answer 4

您应该使用getBoundingClientRect因为它通常可以跨浏览器工作，并在边界矩形上为您提供亚像素精度。

elem.getBoundingClientRect()

Answer 5

Get document size without jQuery

document.documentElement.clientWidth
document.documentElement.clientHeight

And use this if you need Screen size

screen.width
screen.height

Answer 6

This should work for all browsers/devices:

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

    return actualWidth;
}

Answer 7

You can try also:

document.body.offsetHeight
document.body.offsetWidth

Answer 8

如果要获取页面的全宽，包括溢出，请使用document.body.scrollWidth 。

Answer 9

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.

Answer 10

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.