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

CSSValue object

Browser support:
Represents the value of a style property and its type.
The CSSValue object is the base interface for all available style values. There are two objects in JavaScript that are inherited from the CSSValue object:
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. See the example below, for details.


Methods that return the object:
object.getPropertyCSSValue (propertyName)
Related objects:
The base interface, through which you can add new functionalities to the CSSValue object, is the CSSValue interface.

Possible members:

The following constants are available in the scope of the CSSValue object.
You can use them directly through the CSSValue interface (CSSValue.CSS_INHERIT) or through an instance of the CSSValue object. The constants represent the value types supported by the object (see the cssValueType property).
Using the constants instead of their numeric values results in more readable code.
0 The value of the property is inherited from the parent element. Use the cssText property to retrieve the value.
1 The value is a simple style value and the current object is an instance of the CSSPrimitiveValue object.
2 The value is a complex style value and the current object is an instance of the CSSValueList object.
3 The object that belongs to the value is a custom object. Use the custom object or the cssText property to retrieve the value.
Sets or retrieves the contents of a style declaration as a string.
Returns the type of the style value that belongs to the current object.

Example HTML code 1:

This example illustrates the use of the CSSValue object.
        #testDiv {
            border:1px solid #FF0000;
            background-position: 10% 20px;
            clip: rect(10px, 40px, 150px, 5px);
    <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 = (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 = (CSSPrimitiveValue.CSS_NUMBER);
                var g = (CSSPrimitiveValue.CSS_NUMBER);
                var b = (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 ();
                case CSSValue.CSS_PRIMITIVE_VALUE:
                    valueStr += GetPrimitiveValue (value[i]);
                case CSSValue.CSS_VALUE_LIST:
                    valueStr += GetComplexValue (value[i]);
                case CSSValue.CSS_CUSTOM:
                    valueStr += value[i].toString ();

                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 ();
                            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);
                            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);
                            case CSSValue.CSS_CUSTOM:
                                resTable.rows[i].cells[1].innerHTML = "The value is a custom value";
                                resTable.rows[i].cells[2].innerHTML = value.toString ();
                        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!");
<body onload="GetCssProperties ()">
    <div id="testDiv">division element with custom style</div>
    <h3>Style properties of the div above:</h3>
    <table border="1px" cellspacing="5px">
        <thead style="font-weight: bold;">
        <tbody id="resTable">
Did you find this example helpful? yes no

External links:

User Contributed Comments

Post Content

Post Content