JavaScript

window.screen Object Properties | Explained

window.screen is a JavaScript built-in object type used to retrieve the information about the current browser window. It comprises information related to the screen dimensions such as its width, height, color depth, pixel depth, available width, and available height.

This write-up will discuss window.screen object properties in JavaScript. Moreover, the examples related to screen.width, screen.height, screen.availWidth, screen.availHeight, screen.colorDepth, and screen.pixelDepth window screen object properties will also be provided.

screen.width object property in JavaScript

The “screen.width” property of the window.screen object is utilized to display the width of the current screen window in pixels.

Example: Accessing screen.width object property in JavaScript

In the below-given example, we have added a paragraph with the tag “<p>” having an id “p1”:

<!DOCTYPE html>

<html>

<body>

<p id="p1"></p>

Now, we will display the width of the screen in pixels as content of the our paragraph:

<script>

document.getElementById("p1").innerHTML =

"The width of the current screen is  " + screen.width;

</script>

</body>

</html>

Execute the above-given program in your favorite code editor or any online coding sandbox; however, we will utilize the JSBin for this purpose:

As you can see from the output, the width of the current screen object is “1366”:

screen.height object property in JavaScript

When we talk about the width of an object, another property that correlates with it comes to our mind which is “height”. The screen.height property of a window.screen object shows the current screen’s height in pixels.

Example: Accessing screen.height object property in JavaScript

In this example, we will try to access the “screen.height” window.object property and will display its content inside a paragraph:

<!DOCTYPE html>

<html>

<body>

<p id="p1"></p>

<script>

document.getElementById("p1").innerHTML =

"The height of the current screen is  " + screen.height;

</script>

</body>

</html>

Here is the height of our current window.screen object in pixels:

screen.availWidth object property in JavaScript

If you want to know about the available width for the current window object, then you can use the screen.availWidth property. window.screen object properties such as availWidth and availHeight do not include space required by the features like the taskbar. To determine the size of images for including in a document or creating a multiple browser windows, you can utilize the screen.availWidth and screen.availHeight object properties.

Example: Accessing screen.availWidth object property in JavaScript

Execute the following code to check the available width for your window.screen object:

<!DOCTYPE html>

<html>

<body>

<p id="p1"></p>

<script>

document.getElementById("p1").innerHTML =

"The available width of the current screen is  " + screen.availWidth;

</script>

</body>

</html>

The available width of the current screen is “1366”:

window.availHeight object property in JavaScript

The “window.availHeight” property of the window.screen object is used to display the available height of the current window screen in pixels.

Example: Accessing window.availHeight object property in JavaScript

The following example will show you the current window object’s available height:

<!DOCTYPE html>

<html>

<body>

<p id="p1"></p>

<script>

document.getElementById("p1").innerHTML =

"The available Height of the current screen is  " + screen.availHeight;

</script>

</body>

</html>

screen.colorDepth object property in JavaScript

The “screen.colorDepth” property of the screen object is utilized for displaying the depth of the images color palette. This window.screen property specifies the base-2 logarithm of the color numbers. Old computers used “16” bits and modern computers used “24” bits or “32” bits for color resolution.

Example: Accessing screen.colorDepth object property in JavaScript

Executing the below-given JavaScript program will show the screen’s color depth in bits:

<!DOCTYPE html>

<html>

<body>

<p id="p1"></p>

<script>

document.getElementById("p1").innerHTML =

"The Color Depth of the current screen is  " +  screen.colorDepth;

</script>

</body>

</html>

window.pixelDepth Object Property in JavaScript

The “window.pixelDepth” object property is used for returning the current screen’s pixel depth.

Example: Accessing window.pixelDepth Object Property in JavaScript

In the following example, we will display the pixel depth of the “window.screen” object as the content of our added paragraph HTML elements:

<!DOCTYPE html>

<html>

<body>

<p id="p1"></p>

<script>

document.getElementById("p1").innerHTML =

"The Pixel Depth of the current screen is  " +  screen.pixelDepth;

</script>

</body>

</html>

Conclusion

In JavaScript, the window.screen object is used for acquiring information related to the current user screen and the window.screen object properties are utilized to display the width, height, available width, available height, color depth, and pixel depth of the current screen. This write-up discussed window.screen object properties in JavaScript. Moreover, the examples related to screen.width, screen.height, screen.availWidth, screen.availHeight, screen.colorDepth, and screen.pixelDepth window screen object properties are also provided.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.