JavaScript Window innerHeight property

The innerHeight property in JavaScript is a property of the Window object that returns the height of the inner (visible) area of the browser window, in pixels. This property excludes the height of the browser’s toolbar, scrollbars, and any other elements outside the inner area of the window.

Here is an example of how the innerHeight property works:

console.log(window.innerHeight);  // logs the inner height of the browser window

In the code example above, we use the console.log() method to log the value of the window.innerHeight property to the console. Since the innerHeight property is a read-only property that reflects the current inner height of the browser window, the window.innerHeight property will contain the inner height of the window at the time it is accessed.

The innerHeight property is typically used to get the inner height of the browser window, allowing you to perform calculations or adjust the layout of your web page based on the available inner height of the window.

Here is an example of how you might use the innerHeight property to adjust the layout of a web page:

const myDiv = document.getElementById('my-div');

function resize() {
  myDiv.style.height = `${window.innerHeight}px`;
}

window.addEventListener('resize', resize);

In the code example above, we use the document.getElementById() method to access the myDiv element in the document. We then define a resize() function that sets the height style property of the myDiv element to the inner height of the browser window.

Next, we use the window.addEventListener() method to attach an event listener to the resize event of the Window object. This event is triggered whenever the user resizes the browser window, and the resize() function is called to adjust the height of the myDiv element to match the new inner height of the window.

In this way, the innerHeight property can be used to create web pages that are responsive to changes in the inner height of the browser window, allowing you to provide a better user experience for your users.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Blog at WordPress.com.

%d bloggers like this: