You are here: Reference > JavaScript > client-side > style handling > objects > RGBColor

RGBColor object

Browser support:
Represents a style value when it is color.
If the value of a style property is a color, you can use the getRGBColorValue method to retrieve an RGBColor object that represents the value.

Syntax:

Methods that return the object:
CSSPrimitiveValue.getRGBColorValue ( )
The base interface, through which you can add new functionalities to the RGBColor object, is the RGBColor interface.

Possible members:

Properties:
blue
Returns a CSSPrimitiveValue object that represents the blue component of the current RGB color.

This property is read-only.
green
Returns a CSSPrimitiveValue object that represents the green component of the current RGB color.

This property is read-only.
red
Returns a CSSPrimitiveValue object that represents the red component of the current RGB color.

This property is read-only.

Example HTML code 1:

This example illustrates the use of the RGBColor object:
<head>
    <script type="text/javascript">
        function GetRGBComponents () {
            var div = document.getElementById ("myDiv");
            if (window.getComputedStyle) {
                var compStyle = window.getComputedStyle (div, null);
                try {
                    var value = compStyle.getPropertyCSSValue ("background-color");
                    var valueType = value.primitiveType;
                    if (valueType == CSSPrimitiveValue.CSS_RGBCOLOR) {
                        var rgb = value.getRGBColorValue ();
                        var r = rgb.red.getFloatValue (CSSPrimitiveValue.CSS_NUMBER);
                        var g = rgb.green.getFloatValue (CSSPrimitiveValue.CSS_NUMBER);
                        var b = rgb.blue.getFloatValue (CSSPrimitiveValue.CSS_NUMBER);

                        var message = "red: " + r + "\n";
                        message += "green: " + g + "\n";
                        message += "blue: " + b;
                        alert (message);
                    }
                    else {
                        alert ("The value of the background-color property is not an RGB function!");
                    }
                } 
                catch (e) {
                    alert ("Your browser does not support the getPropertyCSSValue method!");
                }
            }
            else {
                alert ("Your browser does not support the getComputedStyle method!");
            }
        }
    </script>
</head>
<body>
    <div id="myDiv" style="background-color:yellow;">An element with background-color.</div>
    <br />
    Use the following button to get the red, green and blue components of the color specified by the background-color property!
    <button onclick="GetRGBComponents ()">Get RGB components</button>
</body>
Did you find this example helpful? yes no

Related pages:

External links:

User Contributed Comments

Post Content

Post Content