Return Pixel Depth of the Screen in JavaScript

In this tutorial, we will discuss how we can return the pixel depth of the screen in JavaScript. There is a property in JavaScript name pixel depth with the help of this property we can quickly return the pixel depth of the screen's color. This pixel depth property returns the screen's color depth in bits per pixel, and this property is read-only means (A property's value can be accessed, but it cannot be given a value. or we could state that it cannot be assigned to or overwritten).

Basically, we are returning how many bits are used to store a screen pixel. The maximum amount, of colors that can be displayed, is known as color depth and is sometimes referred to as "pixel depth" and "bit depth". Modern graphics cards enable True Color (24-bit color), which is needed for photorealistic images and videos.

Syntax

Let's see the syntax of returning the pixel depth of the screen's color using JavaScript ?

let depth; // declaration of the depth type of int
depth = screen.pixelDepth;

Here we define the ?let' variable (or we can also use ?var' in the place of let) then we give the screen's color depth to the let variable using the screen.pixelDepth property of JavaScript.

Note ? Prior to Internet Explorer 9, the pixel depth attribute was not supported. The result returned by pixelDepth and colorDepth is the same, though. Use colorDepth (screen.colourDepth) property as an alternative since it is supported by all browsers.

Algorithm

We have seen the syntax above for returning the pixel depth of the screen's color, now we are going to see the complete approach step by step ?

  • First, we will create the body of the Html code.

  • In the body we will create a button using the ?button' tag.

  • In the button we will define the ?onclick()' event which will call to a function that we are going to create in the script tag.

  • In the script, we will create a variable to store the value got from the ?screen.pixelDepth' method.

  • Using the ?document.write' method we print the screen's color pixel depth.

Example 1

We have seen the steps to get the pixel depth of the screen, now let's implement these steps into the code to get more understanding of it ?


<!DOCTYPE html>
<html>
<head>
   <script>
      function display(){
         let cur = screen.pixelDepth;
         document.write("Pixel Depth of the screen is: " + cur);
      }
   </script>
</head>
<body>
   <h3>Click the below given button to return pixel depth of the screen in JavaScript</h3>
   <button onclick="display()"> Click me!! </button>
</body>
</html>
   <body>
   <p>Set the width of the columns</p>
   <button onclick="display()">Change Width</button>
   <div id="myID">
      This is Demo Text. This is Demo Text. This is Demo Text. This is Demo Text. This is Demo Text. This is Demo Text. This is Demo Text. This is Demo Text. This is Demo Text. This is Demo Text. This is Demo Text. This is Demo Text. This is Demo Text. This is Demo Text. This is Demo Text. This is Demo Text. This is Demo Text. This is Demo Text. This is Demo Text. This is Demo Text.
   </div>
</body>
</html>

In the above code, we first defined the body of the code in that we have created a button using the <button> tag which will call to the "display()" function on clicking and that is defined by the ?onclick' event.

We have defined the ?display' function in the script tag and it contains the variable ?cur' which will contain the return value from the method ?screen.pixelDepth' and finally it will print in the document.

Note ? Related to the pixel method to get the depth of the screen we have two more methods related to the screen, they are ?screen.width' and ?screen.height'. As the method's syntax suggests, these functions are used to get the width and height of the screen respectively.

Example 2

Let's see the code to use these functions and get all the details of the screen ?


<!DOCTYPE html>
<html>
<head>
   <script>
      function display(){
         let height = screen.height;
         let width = screen.width;
         let pixel = screen.pixelDepth;

         document.write("Dimentions of the screen are: ");
         document.write("<br> Height is: " + height);
         document.write("<br> Width is: " + width);
         document.write("<br> depth is: " + pixel);
      }
   </script>
</head>
   <body>
      <h3>Click the below given button to return pixel depth, screen width, and screen height in JavaScript</h3>
      <button onclick="display()"> Click me!! </button>
   </body>
</html>

In the above code, we first defined the body of the code in that we have created a button using the <button> tag which will call to the "display()" function on clicking and that is defined by the ?onclick' event.

We have defined the ?display' function in the script tag and it contains the variable ?height', ?width', and ? which will contain the return value from the methods ?screen.height' , ?screen.width', and ?screen.pixelDepth' and finally it will print these in the document.

Conclusion

In this tutorial, we have learned how we can return the pixel depth of the screen in JavaScript. There is a property in JavaScript name pixel depth with the help of this property we can quickly return the pixel depth of the screen's color. This pixel depth property returns the screen's color depth in bits per pixel, and this property is read-only means

Updated on: 2022-11-07T07:15:10+05:30

391 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements