Top community members
All Wiki Articles Create Wiki Article

If you think it is valuable to share IT knowledge and help others.

It is the right place for you. ‚̧ ūüíĽ

Join our community.

JavaScript - get entire document width

0 contributions
5 points

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>

 

0 contributions

Checkout latest Findings & News:

Checkout latest questions:

Checkout latest wiki articles:

Hey ūüĎč
Would you like to know what we do?
  • Dirask is IT community, where we share coding knowledge and help each other to solve coding problems.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Read more