JavaScript – Screen Object


What is a screen object in Javascript ?

Screen object is used to provide information of the browser screen.

By which we can get all the display properties of the browser.

How to access the screen object ?

The screen object is the window property,

So it can be accessed with or without the ‘window’ prefix.

Learn javascript beginner !!!

Click to Learn More about – Javascript online learning

Syntax :

window.screen

or

screen

What happens when we invoke screen object ?

This object returns the actual browser display information like width,height etc.

There are many properties returned by the screen object listed below

1. width()

width() object returns the width of the screen

2. height()

height() object returns the height of the screen


3. availWidth()

availWidth() object returns the available width

4. availHeight()

availHeight() object returns the available height

5. colorDepth()

colorDepth() object returns the color depth

6. pixelDepth

pixelDepth() object returns the pixel depth.

1. With using ‘window’ object

Example :

<!DOCTYPE html>
<html>
	<head>
		<title>Our title</title>
		<script type="text/javascript">
			document.writeln("<br/>The screen.width = "+window.screen.width);  
			document.writeln("<br/>The screen.height =  "+window.screen.height);  
			document.writeln("<br/>The screen.availWidth =  "+window.screen.availWidth);  
			document.writeln("<br/>The screen.availHeight =  "+window.screen.availHeight);  
			document.writeln("<br/>The screen.colorDepth =  "+window.screen.colorDepth);  
			document.writeln("<br/>The screen.pixelDepth =  "+window.screen.pixelDepth);  
		</script>
	</head>
	<body></body>
</html>

2. Without using ‘window’ object


Example :

<!DOCTYPE html>
<html>
	<head>
		<title>Our title</title>
		<script type="text/javascript">
			document.writeln("<br/>The screen.width = "+screen.width);  
			document.writeln("<br/>The screen.height =  "+screen.height);  
			document.writeln("<br/>The screen.availWidth =  "+screen.availWidth);  
			document.writeln("<br/>The screen.availHeight =  "+screen.availHeight);  
			document.writeln("<br/>The screen.colorDepth =  "+screen.colorDepth);  
			document.writeln("<br/>The screen.pixelDepth =  "+screen.pixelDepth);  
		</script>
	</head>
	<body></body>
</html>

However, the output will be the same

Output :

The screen.width = 1680

The screen.height = 1050

The screen.availWidth = 1680

The screen.availHeight = 967

The screen.colorDepth = 24

The screen.pixelDepth = 24