The Browser Object Model (BOM) is a browser-specific convention referring to all the objects exposed by the web browser. The BOM allows JavaScript to “interact with” the browser.
The object of window represents a browser window and all its corresponding features. A window object is created automatically by the browser itself.
Java Script’s window.screen object contains information about the user’s screen. It can also be written without the window prefix.
Properties:
- screen.width
- screen.height
- screen.availWidth
- screen.availHeight
- screen.colorDepth
- screen.pixelDepth
- screen.width: screen.width property returns the users screen width in pixels.
<!DOCTYPE html>
<html>
<body>
<p id=
"GFG"
></p>
<script>
document.getElementById(
"GFG"
).innerHTML =
" The Screen width is "
+ screen.width;
</script>
</body>
</html>
Output :
The Screen width is 1600
- screen.height: screen.height property returns the users screen height in pixels.
<!DOCTYPE html>
<html>
<body>
<p id=
"GFG"
></p>
<script>
document.getElementById(
"GFG"
).innerHTML =
" The screen height is "
+ screen.height;
</script>
</body>
</html>
Output :
The screen height is 900
- screen.availWidth: screen.availWidth property returns the users screen width in pixels, excluding the interface features.
<!DOCTYPE html>
<html>
<body>
<p id=
"GFG"
></p>
<script>
document.getElementById(
"GFG"
).innerHTML =
"The available screen width is "
+ screen.availWidth;
</script>
</body>
</html>
Output :
The available screen width is 1549
- screen.availHeight: screen.availHeight property returns the users screen height in pixels excluding the interface features.
<!DOCTYPE html>
<html>
<body>
<p id=
"GFG"
></p>
<script>
document.getElementById(
"GFG"
).innerHTML =
"The available screen height is "
+ screen.availHeight;
</script>
</body>
</html>
Output :
The available screen height is 876
- screen.colorDepth: screen.colorDepth property returns the bits (number) to be used to display one color.
Usually, 24 bit or 32 bit hardware is used for color resolution.
24 bits = 16, 777, 216 different (True Colors)
32 bits = 4, 294, 967, 296 different (Deep Colors)<!DOCTYPE html>
<html>
<body>
<p id=
"GFG"
></p>
<script>
document.getElementById(
"GFG"
).innerHTML =
"The screen color depth is "
+ screen.colorDepth;
</script>
</body>
</html>
Output :
The screen color depth is 24
- screen.pixelDepth: screen.pixelDepth property returns the pixel depth of the screen.
<!DOCTYPE html>
<html>
<body>
<p id=
"GFG"
></p>
<script>
document.getElementById(
"GFG"
).innerHTML =
"The screen pixel depth is "
+ screen.pixelDepth;
</script>
</body>
</html>
Output :
The screen pixel depth is 24
leave a comment
0 Comments