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

You are here: Reference > JavaScript > client-side > style handling > properties > cssValueType (CSSValue, CSSValueList, ...)

cssValueType property (CSSValue, CSSValueList, ...)

Browser support:

Returns the type of the style value that belongs to the current object.

The CSSValue object is the base interface for all available style values. There are two objects in JavaScript that inherit from the CSSValue object.

One is the CSSPrimitiveValue object for simple style values (color, width, height, ...)
the other is the CSSValueList object for complex style values (backgroundPosition, borderSpacing, cursor, ...).

The getPropertyCSSValue method returns a CSSPrimitiveValue or CSSValueList object, depending on the type of the style property's value. In case of some special style properties, the getPropertyCSSValue method returns custom objects. The custom objects are also inherited from the CSSValue object.

The cssValueType property of the returned object helps to identify its type. Note: all possible returned objects support the cssValueType property, because it is inherited from the CSSValue object.

Syntax:

object.cssValueType;

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

This property is read-only.

Possible values:

Integer that represents the type of the style value. Predefined constants are available for the possible values of this property, in the scope of the CSSValue object. For further details, see the page for the CSSValue object.

One of the following values (the value of a predefined constant appears in parentheses after the constant):

CSS_INHERIT (0)

The value of the property is inherited from the parent element. Use the cssText property to retrieve the value.

CSS_PRIMITIVE_VALUE (1)

The value is a simple style value and the current object is an instance of the CSSPrimitiveValue object.

CSS_VALUE_LIST (2)

The value is a complex style value and the current object is an instance of the CSSValueList object.

CSS_CUSTOM (3)

The object that belongs to the value is a custom object. Use the custom object or the cssText property to retrieve the value.

Default: this property has no default value.

Example HTML code 1:

This example shows how to get the value type of a style property:

<head>
    <script type="text/javascript">
        function GetValueType () {
            var elem = document.getElementById ("myDiv");
            if (window.getComputedStyle) {
                var compStyle = window.getComputedStyle (elem, '');
                if (compStyle.getPropertyCSSValue) {
                    var cssValue = compStyle.getPropertyCSSValue ("width");
                    alert (cssValue.cssValueType);
                }
                else {
                    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="width:200px;">A division element with style="width:200px"</div>
    <button onclick="GetValueType ()">Get width cssValueType!</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the cssValueType property:

<head>
    <style>
        #testDiv {
            border:1px solid #FF0000;
            background-position: 10% 20px;
            clip: rect(10px, 40px, 150px, 5px);
        }
    </style>
    <script type="text/javascript">
        function GetPrimitiveValue (value) {
            var valueType = value.primitiveType;

            if (valueType == CSSPrimitiveValue.CSS_NUMBER) {
                return value.getFloatValue (CSSPrimitiveValue.CSS_NUMBER);
            }
            if (valueType == CSSPrimitiveValue.CSS_PERCENTAGE) {
                return value.getFloatValue (CSSPrimitiveValue.CSS_PERCENTAGE) + "%";
            }
            if (CSSPrimitiveValue.CSS_EMS <= valueType && valueType <= CSSPrimitiveValue.CSS_DIMENSION) {
                return value.getFloatValue (CSSPrimitiveValue.CSS_PX) + "px";
            }
            if (CSSPrimitiveValue.CSS_STRING <= valueType && valueType <= CSSPrimitiveValue.CSS_ATTR) {
                return value.getStringValue ();
            }
            if (valueType == CSSPrimitiveValue.CSS_COUNTER) {
                var counterValue = value.getCounterValue ();
                return "(identifier: " + counterValue.identifier + 
                       ", listStyle: " + counterValue.listStyle + 
                       ", separator: " + counterValue.separator + ")";
            }
            if (valueType == CSSPrimitiveValue.CSS_RECT) {
                var rect = value.getRectValue ();
                var topPX = rect.top.getFloatValue (CSSPrimitiveValue.CSS_PX);
                var rightPX = rect.right.getFloatValue (CSSPrimitiveValue.CSS_PX);
                var bottomPX = rect.bottom.getFloatValue (CSSPrimitiveValue.CSS_PX);
                var leftPX = rect.left.getFloatValue (CSSPrimitiveValue.CSS_PX);
                return "RECT(" + topPX + "px, " + rightPX + "px, " + bottomPX + "px, " + leftPX + "px)";
            }
            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);
                return "RGB(" + r + "," + g + "," + b + ")";
            }
            
            return value.cssText;
        }

        function GetComplexValue (value) {
            var valueStr = "";
            for (var i = 0; i < value.length; i++) {
                switch (value[i].cssValueType) {
                case CSSValue.CSS_INHERIT:
                    valueStr += value[i].toString ();
                    break;
                case CSSValue.CSS_PRIMITIVE_VALUE:
                    valueStr += GetPrimitiveValue (value[i]);
                    break;
                case CSSValue.CSS_VALUE_LIST:
                    valueStr += GetComplexValue (value[i]);
                    break;
                case CSSValue.CSS_CUSTOM:
                    valueStr += value[i].toString ();
                    break;
                }

                valueStr += "<br/>";
            }

            return valueStr;
        }

        function GetCssProperties () {
            var resTable = document.getElementById ("resTable");            
            var div = document.getElementById ("testDiv");

            if (window.getComputedStyle) {
                var compStyle = window.getComputedStyle (div, null);
                try {
                    for (var i = 0; i < compStyle.length; i++) {
                        var propName = compStyle.item(i);

                        resTable.insertRow (i);
                        resTable.rows[i].insertCell (0);
                        resTable.rows[i].insertCell (1);
                        resTable.rows[i].insertCell (2);

                        resTable.rows[i].cells[0].innerHTML = propName;

                        var message = propName + ": ";
                        var value = compStyle.getPropertyCSSValue (propName);

                        if (value) {
                            switch (value.cssValueType) {
                            case CSSValue.CSS_INHERIT:
                                resTable.rows[i].cells[1].innerHTML = "The value is inherited from the parent";
                                resTable.rows[i].cells[2].innerHTML = value.toString ();
                                break;
                            case CSSValue.CSS_PRIMITIVE_VALUE:
                                resTable.rows[i].cells[1].innerHTML = "The value is a primitive value";
                                resTable.rows[i].cells[2].innerHTML = GetPrimitiveValue (value);
                                break;
                            case CSSValue.CSS_VALUE_LIST:
                                resTable.rows[i].cells[1].innerHTML = "The value is a complex value";
                                resTable.rows[i].cells[2].innerHTML = GetComplexValue (value);
                                break;
                            case CSSValue.CSS_CUSTOM:
                                resTable.rows[i].cells[1].innerHTML = "The value is a custom value";
                                resTable.rows[i].cells[2].innerHTML = value.toString ();
                                break;
                            }
                        }
                        else {
                            resTable.rows[i].cells[1].innerHTML = "null";
                            resTable.rows[i].cells[2].innerHTML = "null";
                        }
                    }
                } 
                catch (e) {
                    alert ("Your browser does not support getPropertyCSSValue method!");
                }
            }
            else {
                alert ("Your browser does not support getComputedStyle method!");
            }
        }
    </script>
</head>
<body onload="GetCssProperties ()">
    <div id="testDiv">division element with custom style</div>
    <br/>
    <h3>Style properties of the div above:</h3>
    <table border="1px" cellspacing="5px">
        <thead style="font-weight: bold;">
            <tr>
                <td>Property</td>
                <td>Type</td>
                <td>Value</td>
            </tr>
        </thead>
        <tbody id="resTable">
        </tbody>
    </table>
</body>