In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > browser > properties > colorDepth (screen)

colorDepth property (screen)

Browser support:

Retrieves the number of bits used to represent the color of a single pixel on the screen or in the buffer when off-screen buffering is allowed.

The value of the colorDepth property can be modified with the bufferDepth property. The pixelDepth property is identical to the colorDepth property, but not supported in Internet Explorer before version 9.

Syntax:

object.colorDepth;

You can find the related objects in the Supported by objects section below.

This property is read-only.

Possible values:

Integer that sets or retrieves the number of bits.

One of the following values:

1 bit per pixel.

4 bits per pixel.

8 bits per pixel.

15 bits per pixel. Same as 16 but only 15 bits are used.

16 bits per pixel.

24 bits per pixel.

32 bits per pixel.

48 bits per pixel.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the bufferDepth and colorDepth properties:

<head>
    <script type="text/javascript">
        function Init () {
            var depthSelect = document.getElementById ("depthSelect");
            depthSelect.value = screen.bufferDepth;
            DisplayColorDepth  ();
        }

        function DisplayColorDepth () {
            var depthInfo = document.getElementById ("depthInfo");
            depthInfo.innerHTML = "bufferDepth: " + screen.bufferDepth + ", colorDepth: " + screen.colorDepth;
        }

        function ModifyColorDepth (selectTag) {
            if ('bufferDepth' in screen) {
                screen.bufferDepth = selectTag.value;
                DisplayColorDepth  ();
            }
            else {
                alert ("Your browser does not support the bufferDepth property!");
            }
        }
    </script>
</head>
<body onload="Init ()">
    Modify the number of bits used to represent the color of a single pixel with this selection list:
    <select id="depthSelect" onchange="ModifyColorDepth (this)">
        <option value="-1">-1</option>
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="4">4</option>
        <option value="8">8</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="24">24</option>
        <option value="32">32</option>
        <option value="48">48</option>
    </select>
    <br /><br />
    The current bit depths:
    <span id="depthInfo" style="padding-left:10px;"></span>
</body>