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