DOM Screen Object
DOM Windows and Related Objects – Part 1
Forward: In this part of the series, we look at the DOM Screen Object.
By: Chrysanthus Date Published: 31 Jul 2012
Introduction
Note: If you cannot see the code or if you think anything is missing (broken link, image absent, etc.), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.
What is a Screen Object?
When a web page is displayed, each html element has a representation in memory. That representation is the object of the element. One of such objects is the screen object, which represents the rectangle that has everything visible on the computer screen. This rectangle normally would have the browser window. The html document space (panel) is inside the browser window. This rectangle also includes the taskbar.
Screen Object Property Syntax
To access a screen object property, use the following syntax:
screen.property
We now look at the screen object properties.
The width Property
The width property returns the total width of the user’s screen in pixels. Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p>text text text</p>
<script type="text/ECMAScript">
alert(screen.width);
</script>
</body>
</html>
The height Property
The height property returns the total height of the user’s screen in pixels. Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p>text text text</p>
<script type="text/ECMAScript">
alert(screen.height);
</script>
</body>
</html>
The availWidth property returns the width of the user's screen, in pixels, minus interface features. Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p>text text text</p>
<script type="text/ECMAScript">
alert(screen.availWidth);
</script>
</body>
</html>
The availHeight Property
The availHeight property returns the height of the user's screen, in pixels, minus interface features like the Windows Taskbar. Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p>text text text</p>
<script type="text/ECMAScript">
alert(screen.availHeight);
</script>
</body>
</html>
The colorDepth Property
The colorDepth property is an indication to the number of colors the screen can display. The higher the value the higher the number of colors the screen can display. The value is in pixels, but it needs a special interpretation, which I will not go into.
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p>text text text</p>
<script type="text/ECMAScript">
alert(screen.colorDepth);
</script>
</body>
</html>
That is it for the DOM Screen Object. We stop here and continue in the next part of the series.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT