EN
JavaScript - get entire document width
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
bodyelement is ready. So checking can be run afterbodyonloadevent occured or made in somebodyscript.
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>