JavaScript BOM Screen Object
In this tutorial you will learn how to use JavaScript screen object properties. In JavaScript, the screen object is part of the BOM (Browser Object Model) and provides information about the user's screen, including its size and resolution. The screen object is a property of the window object, so its properties and methods can be accessed using window.screen.
Here, are some common properties and methods of the screen object as following.
- screen.width and screen.height
- screen.availWidth and screen.availHeight screen.colorDepth screen.pixelDepth
- screen.colorDepth
- screen.pixelDepth
1. screen.width and screen.height
These properties return the width and height of the user's screen, in pixels.
const width = screen.width;
const height = screen.height;2. screen.availWidth and screen.availHeight
These properties return the available width and height of the user's screen, in pixels, after subtracting the space occupied by taskbars, menus, and other system components.
const availWidth = screen.availWidth;
const availHeight = screen.availHeight;3. screen.colorDepth
This property returns the number of bits used to represent a color on the user's screen.
const colorDepth = screen.colorDepth; 4. screen.pixelDepth
This property returns the number of bits used to represent a pixel on the user's screen.
const pixelDepth = screen.pixelDepth;We can use the screen object to adjust the layout and design of our web pages based on the user's screen size and resolution.
Example
we can use media queries or JavaScript to apply different styles or layouts to our web pages for different screen sizes. We can also use the screen object to open new browser windows or tabs with a specific size and position on the user's screen.
Here's an example of how to use the screen object in JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>Window Example</title>
<style>
button {
background: bisque;
}
</style>
</head>
<body>
<h2>TutorialsTrend - BOM Screen Object Examples</h2>
<button onclick="screenobject()">Screen Object</button>
<script>
function screenobject() {
const width = screen.width;
const height = screen.height;
const availWidth = screen.availWidth;
const availHeight = screen.availHeight;
const colorDepth = screen.colorDepth;
const pixelDepth = screen.pixelDepth;
document.write("Available Screen Width: " + width + ", Height: " + height + "</br>");
document.write("Available Screen availWidth: " + width + ", availHeight: " + height +"</br>");
document.write("Available Screen colorDepth: " + colorDepth + "</br>");
document.write("Available Screen pixelDepth: " + pixelDepth);
}
</script>
</body>
</html>In this example, we define a function that uses the screen object to open a new browser window with a size of 920x1040 pixels, centered on the user's screen. We calculate the position of the window using the width and height properties of the screen object.
Output
Now click on the button to show the value of screen properties.
Prev Next