Languages
[Edit]
EN

JavaScript - get entire document width

5 points
Created by:
JustMike
3584

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>
<html>
<body>
  <script>

    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 + '.');
    }

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

 

Hey ūüĎč
Would you like to know what we do?
  • Dirask is online IT community for professionals and hobbyist to share their knowledge and help each other in extraordinary easy way.
  • We welcome everyone
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.