Broad Network


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

This is part 1 of my series, DOM Windows and Related Objects. In this part of the series, we look at the DOM Screen Object.

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
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 Design
Web Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT

Comments

Become the Writer's Fan
Send the Writer a Message