Syntax error HTML Screen colorDepth Property

HTML Screen colorDepth Property

The HTML Screen colorDepth property returns the bit depth of the color palette for displaying images(in bits per pixel).

Syntax

Following is the syntax −

screen.colorDepth

Example

Let us see an example of HTML Screen colorDepth 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 colorDepth Property</h1>
<button class="btn" onclick="get()">Show color depth</button>
<div class="show"></div>
<script>
   function get() {
      document.querySelector(".show").innerHTML = "Color Depth is " + screen.colorDepth + " bits per pixel";
   }
</script>
</body>
</html>

Output

Click on “Show color depth” button to display color depth of screen.

Updated on: 2021-02-16T04:53:12+05:30

152 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements