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

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

getCounterValue method (CSSPrimitiveValue)

Browser support:

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

This method can be used if the type of the represented value is CSS_COUNTER. To get the type of the represented value, use the primitiveType property.
The getCounterValue method is not implemented by browsers and raises an exception in Firefox!

Syntax:

object.getCounterValue ( );

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

Return value:

Returns a Counter object that represents the counter.

Example HTML code 1:

This example illustrates the use of the getCounterValue method:

<head>
    <script type="text/javascript">
        function GetCounter () {
            var div = document.getElementById ("myDiv");
            if (window.getComputedStyle) {
                var compStyle = window.getComputedStyle (div, null);
                try {
                    var value = compStyle.getPropertyCSSValue ("content");
                    try {
                        var counterValue = null;
                        if (value) {
                            if (value.cssValueType == CSSValue.CSS_PRIMITIVE_VALUE) {
                                if (value.primitiveType == CSSPrimitiveValue.CSS_COUNTER) {
                                    counterValue = value.getCounterValue ();
                                }
                            }
                            else {
                                if (value.cssValueType == CSSValue.CSS_VALUE_LIST) {
                                    if (value.length > 0) {
                                        if (value[0].primitiveType == CSSPrimitiveValue.CSS_COUNTER) {
                                            counterValue = value[0].getCounterValue ();
                                        }
                                    }
                                }
                            }
                        }

                        if (counterValue) {
                            alert ("(identifier: " + counterValue.identifier + 
                                   ", listStyle: " + counterValue.listStyle + 
                                   ", separator: " + counterValue.separator + ")");
                        }
                        else {
                            alert ("The value of the counter-increment property is not a counter function!");
                        }
                    }
                    catch (e) {
                        alert ("Your browser does not support the getCounterValue method!");
                    }
                } 
                catch (e) {
                    alert ("Your browser does not support the getPropertyCSSValue method!");
                }
            }
            else {
                alert ("Your browser does not support the getComputedStyle method!");
            }
        }
    </script>
</head>
<body>
    <div id="myDiv" style="content: counter(chapter);">An element with style="content: counter(chapter);"</div>
    <br />
    <button onclick="GetCounter ()">Get the counter of the content property!</button>
</body>