HTML Screen availWidth Property

HTMLWeb DevelopmentFront End Technology

The HTML Screen availWidth property returns the available width of the user’s screen that means it excludes interface features of the browser.

Syntax

Following is the syntax −

screen.availWidth

Example

Let us see an example of HTML Screen availWidth Property −

Live Demo

<!DOCTYPE html>
<html>
<style>
   body {
      color: #000;
      height: 100vh;
      background-color: #FBAB7E;
      background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 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;
      margin: 1rem auto;
      font-weight: bold;
      font-family: sans-serif;
   }
</style>
<body>
<h1>HTML screen availWidth Property</h1>
<button class="btn" onclick="get()">Show availWidth Value</button>
<div class="show"></div>
<script>
   function get() {
      document.querySelector(".show").innerHTML = "Available Width is " + screen.availWidth + " px";
   }
</script>
</body>
</html>

Output

Click on “Show availWidth value” button to display the value of availWidth property −

raja
Published on 24-Sep-2019 11:35:21
Advertisements