How To Get Document Height And Width Without Using Jquery

Looking to get the document height and width without diving into the world of jQuery? You've come to the right place! While jQuery can be a useful tool for web development, sometimes you might prefer to keep things simple and native. In this article, we'll walk you through the process of fetching the document's height and width using pure JavaScript.

Let's start by understanding how to access the document height and width using JavaScript code. To do this, you'll need to utilize the `document` object properties. The `document.documentElement` property represents the `` element in a document, and you can access its height and width using the `clientHeight` and `clientWidth` properties, respectively.

Here's a simple JavaScript code snippet that demonstrates how to retrieve the document height and width:

const docHeight = document.documentElement.clientHeight;
const docWidth = document.documentElement.clientWidth;

console.log("Document Height:", docHeight);
console.log("Document Width:", docWidth);

In the code snippet above, we store the document height and width in variables `docHeight` and `docWidth`, respectively, and then log the values to the console for visual confirmation.

However, it's essential to consider that the document height and width can vary depending on the contents and structure of your webpage. For instance, if the content exceeds the viewport size and requires scrolling, the document height may be larger than the viewport height.

Another aspect to keep in mind is that the viewport's dimensions can be accessed using the `window.innerHeight` and `window.innerWidth` properties, which provide the height and width of the viewport, including the scrollbar if present.

If you're interested in determining the full scrollable height and width of the document, you can use the `document.body.scrollHeight` and `document.body.scrollWidth` properties. These properties account for the entire height and width of the document, even if it extends beyond the initial viewport.

Here's a revised version of the JavaScript code snippet that retrieves the scrollable height and width of the document:

const fullHeight = document.body.scrollHeight;
const fullWidth = document.body.scrollWidth;

console.log("Full Document Height:", fullHeight);
console.log("Full Document Width:", fullWidth);

By incorporating the `document.body.scrollHeight` and `document.body.scrollWidth` properties, you gain access to the complete dimensions of the document, enabling you to handle scenarios where the content extends beyond the visible viewport.

In summary, fetching the document height and width without relying on jQuery is achievable through JavaScript's native properties such as `clientHeight`, `clientWidth`, `scrollHeight`, and `scrollWidth`. Incorporating these properties in your code allows you to access accurate measurements of the document's dimensions, catering to various layout requirements within your web projects.