JavaScript Window innerWidth and innerHeight Properties

0 0 1 minute read

The innerWidth property in JavaScript returns the width and innerHeight property returns the height of window content area.

Syntax:

window.innerWidth
window.innerHeight

Parameter: It doesn’t require any parameters.

Return Value: It returns a number(Representing the Width and Height of the window’s content area).

Note: For IE 8 i.e (Internet Edge 8) or earlier, use clientWidth and clientHeight to get the width and height of the window.

Example:

HTML

<body style="text-align:center;"> 
    <div class="gfg" 
         style="font-size:40px; 
                font-weight:bold; 
                color:green;"> 
        zambiatek 
    </div> 
    <h2>Browser Window</h2> 
    <p id="demo"></p> 
    <script> 
        var Width, Height, result; 
        Width = window.innerWidth || document.documentElement.clientWidth 
                || document.body.clientWidth; 
        Height = window.innerHeight || document.documentElement.clientHeight 
                || document.body.clientHeight; 
        result = document.getElementById("demo"); 
        result.innerHTML = "Browser inner width: " + Width + 
                            "<br>Browser inner height: " + Height; 
          
    </script> 
</body>

Output:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!