¿Cómo puedo leer el valor del contador de CSS aplicado?

Question

Digamos que tienes una CSS 2.1 mostrador como

ol { 
    counter-reset: section; 
    list-style-type: none; 
} 
li:before { 
    counter-increment: section; 
    content: counters(section, ".") " "; 
} 


<ol> 
    <li>itemA</li>   <!-- 1  --> 
    <li>itemB    <!-- 2  --> 
    <ol> 
     <li>itemC</li>  <!-- 2.1 --> 
     <li id="foo">itemD</li>  <!-- 2.2 --> 

(ver https://developer.mozilla.org/en/CSS_Counters "contadores de anidación")

¿Hay una manera de leer/sacar el :before.content ("2.2" en este caso) para <li id="foo"> en JavaScript?

Editar: En mi caso, una solución solo de Mozilla sería suficiente. Pero realmente parece que no hay forma de acceder a esta información. Al menos no encontré ninguno al https://developer.mozilla.org/en/CSS_Counters ff.

Answer 1

Nada que se me ocurra, no. : antes de que los pseudo-elementos no sean parte del DOM, por lo que no hay forma de abordar su contenido.

Puede hacer una función que escanea el DOM de la hoja de estilo para las reglas: before y determina qué reglas ha aplicado el navegador donde, pero sería increíblemente desordenado.

Answer 2

Pensé en una solución para intentar obtener el valor .content pero incluso eso no funciona porque no se ha establecido. Eso es realmente impactante ¡No creo que haya una manera fácil de obtener este valor!

Podría calcularlo con un Javascript desagradable, pero eso volaría todo el sentido de este estilo automático de css fuera del agua.

Answer 3

Estoy de acuerdo con los demás: no hay forma de hacerlo actualmente. Por lo tanto, sugiero que reemplace los contadores basados ​​en CSS por los basados ​​en JavaScript. No debería ser demasiado difícil escribir un script en jQuery para realizar el mismo tipo de etiquetado de los elementos de la lista y, a continuación, conocer qué valores insertó. Quizás podría mantener la numeración basada en CSS como una alternativa en caso de que javascript esté deshabilitado en el navegador.

Answer 4

var x = document.getElementById("foo"); 
var y = document.defaultView.getComputedStyle(x, "::before").getPropertyValue(
      "counter-increment"); 

": before" funciona por compatibilidad con versiones anteriores si esto no funciona, no sé si es compatible con ":: before".

Aclaración: : es pseudo-clase & elementos en CSS2.1, :: es pseudo-elemento en CSS3.

Probablemente tendrá que analizar el número con parseInt.

Desafortunadamente getComputedStyle es una función de Estándares, lo que significa que MSIE no es compatible con esto, pero FF, Chrome & Safari y Opera do.