Syntax error HTML Window outerWidth Property

HTML Window outerWidth Property

The HTML Window outerWidth property returns the width of the browser window including all interface elements.

Syntax

Following is the syntax −

window.outerWidth

Let us see an example of HTML Window outerWidth 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 outerWidth Property</h1>
<button onclick="display()" class="btn">Show browser window width</button>
<div class="show"></div>
<script>
   function display() {
      document.querySelector('.show').innerHTML = 'Browser Window width is: ' + window.outerWidth + "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:08:13+05:30

174 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements