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

You are here: Reference > JavaScript > client-side > style handling > methods > getFloatValue (CSSPrimitiveValue)

getFloatValue method (CSSPrimitiveValue)

Browser support:

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

This method can be used if the type of the represented value is a float type (CSS_NUMBER - CSS_DIMENSION). To get the type of the represented value, use the primitiveType property.

The getFloatValue method converts the returned value from the current unit type into the specified unit type. Not all float unit types are supported by the getFloatValue method.

The following types are supported:

CSS_NUMBER, CSS_PERCENTAGE, CSS_PX, CSS_CM, CSS_MM, CSS_IN, CSS_PT, CSS_PC.

The following types are not supported:

CSS_EMS, CSS_EXS, CSS_DEG, CSS_RAD, CSS_GRAD, CSS_MS, CSS_S, CSS_HZ, CSS_KHZ, CSS_DIMENSION.

Using an unsupported value raises an exception in Firefox.

Syntax:

object.getFloatValue (unitType);

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

Parameters:

unitType

Required. Integer that specifies the unit type for the returned value. Predefined constants are available for the possible values of this parameter, in the scope of the CSSPrimitiveValue object. For further details, see the page for the CSSPrimitiveValue object.

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

CSS_NUMBER (1)

The required value is a simple number. Can be used only if the current type of the value is CSS_NUMBER.

CSS_PERCENTAGE (2)

The value is required in percentage. Can be used only if the current type of the value is CSS_PERCENTAGE.

CSS_PX (5)

The value is required in pixels. Can be used only if the current type of the value is not CSS_NUMBER or CSS_PERCENTAGE.

CSS_CM (6)

The value is required in centimeters. Can be used only if the current type of the value is not CSS_NUMBER or CSS_PERCENTAGE.

CSS_MM (7)

The value is required in millimeters. Can be used only if the current type of the value is not CSS_NUMBER or CSS_PERCENTAGE.

CSS_IN (8)

The value is required in inches. Can be used only if the current type of the value is not CSS_NUMBER or CSS_PERCENTAGE.

CSS_PT (9)

The value is required in points. Can be used only if the current type of the value is not CSS_NUMBER or CSS_PERCENTAGE.

CSS_PC (10)

The value is required in picas. Can be used only if the current type of the value is not CSS_NUMBER or CSS_PERCENTAGE.

Return value:

Number that contains the value in the specified unit type.

Example HTML code 1:

This example illustrates the use of the getFloatValue 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 type of the width property is not a 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 float value of the width property!</button>
</body>