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

You are here: Reference > JavaScript > client-side > style handling > methods > getPropertyCSSValue

getPropertyCSSValue method

Browser support:

Retrieves an object that represents the value of the specified style property.

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.

The getPropertyCSSValue method is supported in Opera, but it always raises an exception. Therefore, always use this method inside a try/catch block. See the examples below for details.

Note: the style object supports the getPropertyCSSValue method in Firefox, but it always returns null.

If you only need the value of a style property as a string, use the getPropertyValue and getAttribute methods.

Syntax:

object.getPropertyCSSValue (propertyName);

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

Parameters:

propertyName

Required. String that specifies the name of the style property. This parameter is not case sensitive.

Return value:

Returns a CSSPrimitiveValue, CSSValueList or a custom object, depending on the type of the style property.

Example HTML code 1:

This example illustrates the use of the getPropertyCSSValue method:

<head>
    <script type="text/javascript">
        function GetFloatValueOfWidth () {
            var div = document.getElementById ("myDiv");
            if (window.getComputedStyle) {
                var compStyle = window.getComputedStyle (div, null);
                try {
                    var value = compStyle.getPropertyCSSValue ("width");
                    var valueType = value.primitiveType;
                    switch (valueType) {
                    case CSSPrimitiveValue.CSS_NUMBER:
                        var floatValue = value.getFloatValue (CSSPrimitiveValue.CSS_NUMBER);
                        alert ("The value of the width property: " + floatValue);
                        break;
                    case CSSPrimitiveValue.CSS_PERCENTAGE:
                        var floatValue = value.getFloatValue (CSSPrimitiveValue.CSS_PERCENTAGE);
                        alert ("The value of the width property: " + floatValue + "%");
                        break;
                    default:
                        if (CSSPrimitiveValue.CSS_EMS <= valueType && valueType <= CSSPrimitiveValue.CSS_DIMENSION) {
                            var floatValue = value.getFloatValue (CSSPrimitiveValue.CSS_PX);
                            alert ("The value of the width property: " + floatValue + "px");
                        }
                        else {
                            alert ("The value of the width property cannot be converted to float!");
                        }
                    }
                } 
                catch (e) {
                    alert ("Your browser does not support getPropertyCSSValue method!");
                }
            }
            else {
                alert ("Your browser does not support getComputedStyle method!");
            }
        }
    </script>
</head>
<body>
    <div id="myDiv" style="width:20em;">An element with style="width:20em"</div>
    <br />
    <button onclick="GetFloatValueOfWidth ()">Get the CSS float value of the width property!</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example is more complex than the previous one. It shows how to list all style properties for an HTML element.

<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 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 value list";
                                resTable.rows[i].cells[2].innerHTML = "";
                                for (var j = 0; j < value.length; j++) {
                                    resTable.rows[i].cells[2].innerHTML += GetPrimitiveValue (value[j]) + "<br/>";
                                }
                                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>