Java Reference
In-Depth Information
}
document.write("Your screen supports " + colorDepth +
"bit color");
</script>
</body>
</html>
Save the page as
ch8_example2.html
. When you load it into your browser, the background color of the
page will be determined by your current screen color depth. Also, a message in the page will tell you
what the color depth currently is.
You can test that the code is working properly by changing the colors supported by your screen. By
refreshing the browser, you can see what difference this makes to the color of the page.
Note
In Firefox, Safari, and Chrome browsers, it's necessary to shut down
and restart the browser to observe any effect.
As you saw earlier, the
window
object has the
screen
object property. One of the properties of this
object is the
colorDepth
property, which returns a value of
1
,
4
,
8
,
15
,
16
,
24
, or
32
. This represents the
number of bits assigned to each pixel on your screen. (A
pixel
is just one of the many dots that make
up your screen.) To work out how many colors you have, you just calculate the value of
2
to the power
of the
colorDepth
property. For example, a
colorDepth
of
1
means that two colors are available, a
colorDepth
of
8
means that
256
colors are available, and so on. Currently, most people have a screen
color depth of at least
8
, but usually
24
or
32
.
The first task of the script block is to set the color of the background of the page based on the number
of colors the user can actually see. You do this in a big
switch
statement. The condition that is checked
for in the
switch
statement is the value of the
colorDepth
variable, which is set to
window.screen
.colorDepth
:
var colorDepth = window.screen.colorDepth;
switch (colorDepth) {
You don't need to set a different color for each
colorDepth
possible, because many of them are similar
when it comes to general web use. Instead, you set the same background color for different, but similar,
colorDepth
values. For a
colorDepth
of
1
or
4
, you set the background to white. You do this by
declaring the
case 1:
statement, but you don't give it any code. If the
colorDepth
matches this
case
statement, it will fall through to the
case 4:
statement below it, where you do set the background color
to white. You then call a
break
statement, so that the case matching will not fall any further through
the
switch
statement:
case 1:
case 4:
document.bgColor = "white";
break;
