Developers often need to determine the size of the viewport as the user interacts with their website. This is done to ensure that the layout of their web page is responsive to the user's screen size, thus making them represent the content on their web page accordingly.
The outerWidth and the outerHeight properties of the window object help developers retrieve the window size in pixels. This Answer will cover all the necessary details, such as the syntax, return values, and implementation for the aforementioned properties.
Note: The returned dimensions also cover the height and width of scrollbars and toolbars if they appear in the viewport.
Now that we know the use of the two properties and how they benefit developers, let's take a look at their syntax:
//to retrieve the outer height of the window
window.outerHeight
//to retrieve the outer width of the window
window.outerWidth
Here, a window refers to an open window in the browser.
The return value of these properties is of type Number, representing the outer width and height of a window opened in the user's browser.
Note: We must know that
window.outerWidthandwindow.outerHeightare for read-only purposes.
Let's look at a code example that will use these properties to fetch the outer width and height, respectively:
The explanation that follows from the code example above is given below:
Lines 5–9: In these lines, we have a <div> tag that encloses the content of our web page. The HTML elements that help us demonstrate the functionality of the properties mentioned in this Answer are as follows:
Line 7: This line contains a placeholder <p> tag that will render the window's outer width and height for the user.
Line 8: Here, we have an HTML <button> tag that listens for the onclick event and fires the getDimensions() method.
Lines 10–17: These lines contain our getDimensions() method, whose body is composed of the statements below:
Lines 12–13: Here, we use the window.outerWidth and window.outerHeight properties and assign their return values to the variables outerWidth and outerHeight, respectively.
Lines 14–15: This is where we fetch the placeholder <p> tag using the document.getElementById() method and populate it with the dimensions using the innerHTML property.
To read more on
document.getElementById()method and theinnerHTMLproperty, please refer to the Answers linked below:
Free Resources