Counter object
Represents a style value when it is a counter function.
If the value of a style property is a counter function, you can use the getCounterValue method to retrieve a Counter object that represents the value.
Calling the getCounterValue method is the only way to retrieve a Counter object, but the getCounterValue method is not implemented by browsers and raises an exception in Firefox (see the example below).
Syntax:
Methods that return the object:
| • | CSSPrimitiveValue.getCounterValue ( ) |
The base interface, through which you can add new functionalities to the Counter object, is the Counter interface.
Possible members:
Properties:
|
Returns a string that identifies the name of the counter.
This property is read-only. |
|||||||
|
Returns a string that identifies the list style of the counter.
This property is read-only. |
|||||||
|
Returns a string that identifies the separator of the nested counters.
This property is read-only. |
Example HTML code 1:
This example shows how to use the Counter object for the value of the content style property:
|
|
||||
<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 value of the content property!</button> </body> |
||||
|
||||
|
Did you find this example helpful?
|
Related pages:
External links:
User Contributed Comments