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

You are here: Reference > JavaScript > client-side > style handling > properties > primitiveType (CSSPrimitiveValue)

primitiveType property (CSSPrimitiveValue)

Browser support:

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

Depending on the type, the appropriate getter method needs to be used to retrieve the represented value. See the examples for details.

Syntax:

object.primitiveType;

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 CSSPrimitiveValue object. For further details, see the page for the CSSPrimitiveValue object.

The value can be one of the following values (the value of a predefined constant appears in parentheses after the constant):

CSS_UNKNOWN (0)

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

CSS_NUMBER (1)

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

CSS_PERCENTAGE (2)

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

CSS_EMS (3)

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

CSS_EXS (4)

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

CSS_PX (5)

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

CSS_CM (6)

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

CSS_MM (7)

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

CSS_IN (8)

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

CSS_PT (9)

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

CSS_PC (10)

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

CSS_DEG (11)

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

CSS_RAD (12)

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

CSS_GRAD (13)

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

CSS_MS (14)

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

CSS_S (15)

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

CSS_HZ (16)

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

CSS_KHZ (17)

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

CSS_DIMENSION (18)

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

CSS_STRING (19)

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

CSS_URI (20)

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

CSS_IDENT (21)

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

CSS_ATTR (22)

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

CSS_COUNTER (23)

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

CSS_RECT (24)

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

CSS_RGBCOLOR (25)

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

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the primitiveType property:

<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 type of the width property is not 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 div element with style="width:20em"</div>
    <br />
    <button onclick="GetFloatValueOfWidth ()">Get the 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. It shows how to list all style settings for a 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>