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

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

CSSPrimitiveValue object

Browser support:

Represents the value of a simple style property and its type.

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 CSSPrimitiveValue object represents a simple style value and its type. The primitiveType property of the CSSPrimitiveValue object receives the type of the contained value. Depending on the type of the contained value, the corresponding getter method can be used to return the value. See the examples for details.

The CSSPrimitiveValue object is useful if you want to get or set the value of a style property in a required unit. See the page for the getFloatValue and setFloatValue methods for details.
Another advantage of the CSSPrimitiveValue object is that you can retrieve the red, green, blue component of a color, regardless of the format (predefined, hexadecimal or RGB color value) the style property specified in. For example, when the color style property set to 'red', then you can get the value of the color style property with the getRGBColorValue method. The object returned by the getRGBColorValue method contains the RGB components of the color in decimal format ('red' --> 255,0,0).

Syntax:

Properties that reference the object:

•	RGBColor.blue
•	Rect.bottom
•	RGBColor.green
•	Rect.left
•	RGBColor.red
•	Rect.right
•	Rect.top

Methods that return the object:

•	object.getPropertyCSSValue (propertyName)
	Related objects: CSSStyleDeclaration, style

The base interface, through which you can add new functionalities to the CSSPrimitiveValue object, is the CSSPrimitiveValue interface.

Inherits from:

CSSValue

Possible members:

Constants:

The following constants are available in the scope of the CSSPrimitiveValue object.

You can use them directly through the CSSPrimitiveValue interface (CSSPrimitiveValue.CSS_UNKNOWN) or through an instance of the CSSPrimitiveValue object. The constants represent the value types supported by the object. You can use them for the value of the primitiveType property or for the first parameter of the getFloatValue, setFloatValue or setStringValue method.

Using the constants instead of their numeric values results in more readable code.

CSS_UNKNOWN

The type of the value is unknown. Use the cssText property to get the value.

CSS_NUMBER

The value is a simple number. Use the getFloatValue method to get the value.

CSS_PERCENTAGE

The value is given in percentage. Use the getFloatValue method to get the value.

CSS_EMS

The value is given in em units. Use the getFloatValue method to get the value.

CSS_EXS

The value is given in ex units. Use the getFloatValue method to get the value.

CSS_PX

The value is given in pixels. Use the getFloatValue method to get the value.

CSS_CM

The value is given in centimeters. Use the getFloatValue method to get the value.

CSS_MM

The value is given in millimeters. Use the getFloatValue method to get the value.

CSS_IN

The value is given in inches. Use the getFloatValue method to get the value.

CSS_PT

The value is given in points. Use the getFloatValue method to get the value.

CSS_PC

The value is given in picas. Use the getFloatValue method to get the value.

CSS_DEG

The value is given in degrees. Use the getFloatValue method to get the value.

CSS_RAD

The value is given in radians. Use the getFloatValue method to get the value.

CSS_GRAD

The value is given in grads. Use the getFloatValue method to get the value.

CSS_MS

The value is given in milliseconds. Use the getFloatValue method to get the value.

CSS_S

The value is given in seconds. Use the getFloatValue method to get the value.

CSS_HZ

The value is given in Hertz. Use the getFloatValue method to get the value.

CSS_KHZ

The value is given in kilo Hertz. Use the getFloatValue method to get the value.

CSS_DIMENSION

The value is a number with an unknown dimension. Use the getFloatValue method to get the value.

CSS_STRING

The value is a string. Use the getStringValue method to get the value.

CSS_URI

The value is a URI. Use the getStringValue method to get the value.

CSS_IDENT

The value is an identifier. Use the getStringValue method to get the value.

CSS_ATTR

The value is an attribute function. Use the getStringValue method to get the value.

CSS_COUNTER

The value is a counter function. Use the getCounterValue method to get the value.

CSS_RECT

The value is a rect function. Use the getRectValue method to get the value.

CSS_RGBCOLOR

The value is an RGB color. Use the getRGBColorValue method to get the value.

Properties:

cssText

Sets or retrieves the contents of a style declaration as a string.

cssValueType

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

primitiveType

Returns the type of the value represented by the current CSSPrimitiveValue object.

Methods:

getCounterValue

If the value represented by the current CSSPrimitiveValue object is a counter function, then retrieves a Counter object that represents the value.

getFloatValue

If the value represented by the current CSSPrimitiveValue object is a number, then retrieves the value in the specified unit type.

getRectValue

If the value represented by the current CSSPrimitiveValue object is a rect function, then retrieves a CSSPrimitiveValue object that represents the value.

getRGBColorValue

If the value represented by the current CSSPrimitiveValue object is a color, then retrieves an RGBColor object that represents the value.

getStringValue

If the value represented by the current CSSPrimitiveValue object is a string, then retrieves it.

setFloatValue

Specifies a float value for the CSSPrimitiveValue object with the specified unit type.

setStringValue

Specifies a string value for the CSSPrimitiveValue object with the specified type.

Example HTML code 1:

This example illustrates the use of the CSSPrimitiveValue object:

<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 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 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>