Syntax error HTML Window outerHeight Property

HTML Window outerHeight Property

The HTML Window outerHeight property returns the height of the browser window including all interface elements.

Syntax

Following is the syntax −

window.outerHeight

Let us see an example of HTML Window outerHeight Property −

Example

 Live Demo

<!DOCTYPE html>
<html>
<style>
   body {
      color: #000;
      height: 100vh;
      background-color: #8BC6EC;
      background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
      text-align: center;
   }
   .btn {
      background: #db133a;
      border: none;
      height: 2rem;
      border-radius: 2px;
      width: 40%;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1rem auto;
   }
   .show {
      font-size: 1.2rem;
   }
</style>
<body>
<h1>HTML Window outerHeight Property</h1>
<button onclick="display()" class="btn">Show browser window height</button>
<div class="show"></div>
<script>
   function display() {
      document.querySelector('.show').innerHTML = 'Browser Window height is: ' + window.outerHeight + "px";
   }
</script>
</body>
</html>

Output

Click on “Show browser window height” button to display the height of the browser window including the interface elements:

Updated on: 2019-10-01T11:05:08+05:30

167 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements