EN
JavaScript - get entire document size
3
points
In this article, we're going to have a look at how to get the entire document size with JavaScript.
Quick solution:
var htmlElement = document.documentElement;
var bodyElement = document.body;
var width = Math.max(htmlElement.clientWidth,
htmlElement.scrollWidth, htmlElement.offsetWidth,
bodyElement.scrollWidth, bodyElement.offsetWidth);
var height = Math.max(htmlElement.clientHeight,
htmlElement.scrollHeight, htmlElement.offsetHeight,
bodyElement.scrollHeight, bodyElement.offsetHeight);
Note:
To know more about preseted solutions read this articles: width and height.
Practical example
The presented below solution is based on taking the biggest known height and width to predict total page size. We assumed that: the document is all client area with parts that overflow outside.
Quick solution:
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<p>Web page content here...</p>
<script>
var htmlElement = document.documentElement;
var bodyElement = document.body;
var width = Math.max(htmlElement.clientWidth,
htmlElement.scrollWidth, htmlElement.offsetWidth,
bodyElement.scrollWidth, bodyElement.offsetWidth);
var height = Math.max(htmlElement.clientHeight,
htmlElement.scrollHeight, htmlElement.offsetHeight,
bodyElement.scrollHeight, bodyElement.offsetHeight);
console.log('entire document width: ' + width + 'px');
console.log('entire document height: ' + height + 'px');
</script>
</body>
</html>
Note:
Go to the articles from the See also section below, for detailed examples.