Como acessar o conteúdo gerado por CSS com JavaScript

Não consigo encontrar nenhuma interface para acessar o valor real ao vivo. [do contador]

Sim. Eu não acho que haja um. Desculpa.

A única coisa que posso pensar seria passar por todos os elementos (incluindo :before / :after pseudo-elementos) antes do elemento no documento, procurando por contadores e sumndo quantos são.

Obviamente isso é horrível. Se você tentar reproduzir o mecanismo de counter do navegador, provavelmente seria mais fácil (e muito mais compatível, considerando a falta de suporte a contador / conteúdo do IE < = 7) para simplesmente substituí-lo por seus próprios contadores baseados em script. por exemplo. algo ao longo das linhas de:

 this 
...
ooo, pretty
 window.onload= function() { var counters= Node_getElementsByClassName(document.body, 'counter'); var indices= []; for (var counteri= 0; counteri0;) { var link= document.links[i]; if ( link.hostname===location.hostname && link.pathname===location.pathname && link.search===location.search && link.hash==='#'+counter.id ) { var text= document.createTextNode('('+indices.join('.')+')'); link.parentNode.insertBefore(text, link.nextSibling); } } } } }; 

Leia isso:

O conteúdo gerado não altera a tree do documento. Em particular, não é retornado ao processador de linguagem do documento (por exemplo, para reparos).


O conteúdo especificado em uma folha de estilo não se torna parte do DOM.

Portanto, por esse motivo, o getComputedStyle não funcionará nesse caso ; Eu acho que a única maneira, é executar um loop clássico, como alguém descreveu abaixo!

Não consigo encontrar nenhuma interface para acessar o valor real ao vivo.

Se você não pode obter o valor de window.getComputedStyle , parece que seria impossível.

Mais importante ainda, embora possa fazê-lo, acho que isso pode estar abusando do CSS, já que você está quebrando a barreira entre conteúdo e apresentação neste momento.

Confira esta pergunta relacionada Quais são os bons usos da propriedade “Conteúdo” do CSS?

Eu portaria seu css para Javascript, isso permite que você obtenha a legenda da figura e também obtém uma maior cobertura do navegador. Usando o jQuery você faria algo assim:

 $(function() { var section = 0; $(".section").each(function() { section++; var figure = 0; $(this).find("img.figure").each(function() { figure++; var s = "Fig. " + section + "." + figure; $(this).attr({alt:s}).after(s); }); }); }); 

Então você poderia fazer:

 
blabla

Lorem ipsum dolor sit amet see here

Embora eu concorde que fazer isso usando CSS seria muito legal.