JavaScript - get entire document width

5 points
Created by:

In this article, we're going to have a look at how to get the entire document width with JavaScript.

Presented below solution is based on taking the biggest known width (clientWidth, html or body element) to predict total page size. We assumed that: document, it is all client area with parts that overflow outside.

Note: it is important to check height after body element is ready. So checking can be run after body onload event occured or made in some body script.

Red this article to know how to measture entire document height.

Quick solution:

// ONLINE-RUNNER:browser;

<!doctype html>

    function getEntireWidth() {
        var html = document.documentElement;
        var body = document.body;

        var width = Math.max(html.clientWidth, 
            html.scrollWidth, html.offsetWidth, 
            body.scrollWidth, body.offsetWidth);

        return width;

    function onClick() {
        var entireWidth = getEntireWidth();
        console.log('Entire width is equal to ' + entireWidth + '.');

  <button onclick="onClick()">Measure document width</button>


Native Advertising
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂