Cómo acceder a la CSS contenido generado con JavaScript

Question

genero la numeración de mis encabezados y cifras con counter y content propiedades de CSS:

img.figure:after { 
    counter-increment: figure; 
    content: "Fig. " counter(section) "." counter(figure); 
} 

Este (navegador apropiado error u omisión) da un buen etiquetado "Fig. 1.1", "Fig. 1.2" y así sucesivamente siguiendo cualquier imagen.

Pregunta: ¿Cómo puedo acceder a esto desde Javascript? La pregunta es doble en cuanto a que me gustaría acceder al el valor actual de un determinado contador (en un determinado nodo DOM) o el valor del contenido generado por CSS (en un determinado nodo DOM) o, obviamente, ambas informaciones.

Antecedentes: me gustaría añadir a los enlaces de respaldo que hacen referencia a las cifras del número apropiado, como esto:

<a href="#fig1">see here</h> 
------------------------^ " (Fig 1.1)" inserted via JS 

Por lo que yo puedo ver, que se reduce a este problema: yo podía acceso content o counter-increment través getComputedStyle:

var fig_content = window.getComputedStyle(
        document.getElementById('fig-a'), 
        ':after').content; 

sin embargo, este no es el en vivo valor, pero el declarado en la hoja de estilo. No puedo encontrar ninguna interfaz para acceder al real en vivo. En el caso del contador, ni siquiera hay una propiedad de CSS real para consultar.

Editar: Cavando más y más a través de las especificaciones DOM, encontré the DOM Level 2 Style Counter interface. Esto parece a) permitir el acceso al valor del contador actual yb) implementarse en Firefox, al menos. Sin embargo, no tengo idea de cómo usarlo. Mi enfoque actual murió trágicamente después de esta salida Firebug:

// should return a DOM 2 Counter interface implementation... 
window.getComputedStyle(fig_a_element, ':after') 
     .getPropertyCSSValue("counter-increment")[0] 
     .getCounterValue(); 

[Exception... "Modifications are not allowed for this document" code: "7" 
nsresult: "0x80530007 (NS_ERROR_DOM_NO_MODIFICATION_ALLOWED_ERR)" 
location: "http://localhost/countertest.html Line: 71"] 

Cualquier idea, cómo esto podría ser traído a la vida sería muy apreciada.

Editar 2: Aparentemente malinterpreté el objeto Counter del estilo DOM Nivel 2. Tampoco tiene propiedad para devolver el valor del contador actual. Esto hace que el enfoque anterior sea inválido.

Nuevo enfoque: ¿Existe la posibilidad de leer el contenido de un pseudo-elemento a través del DOM? Es decir, ¿puedo seleccionar el pseudo-elemento (me viene a la mente treeWalker) y luego obtener su nodeValue? (Si empieza a escribir 'jQuery' ahora, por favor, reconsiderar cambiar ese término en 'Arden' ...)

Answer 1

no puedo encontrar ninguna interfaz para acceder al valor de carne y hueso. [del contador]

Sí. No creo que haya uno. Lo siento.

Lo único que se me ocurre es revisar cada elemento (incluidos sus pseudoelementos :before/:after) antes del elemento en el documento, buscar contadores y sumar cuantos hay.

Obviamente eso es horrible. Si va a tratar de reproducir el mecanismo propio del navegador counter, probablemente sería más fácil (y mucho más compatible, dado que IE < = 7 es la falta de soporte de contador/contenido) simplemente reemplazarlo con sus propios contadores basados ​​en scripts. p.ej. algo a lo largo de las líneas de:

<a href="#prettypicture">this</a> 

<div class="counter level=0">...</div> 
<img id="prettypicture" class="counter level=1" alt="ooo, pretty"/> 

window.onload= function() { 
    var counters= Node_getElementsByClassName(document.body, 'counter'); 
    var indices= []; 
    for (var counteri= 0; counteri<counters.length; counteri++) { 
     var counter= counters[counteri]; 

     var level= Element_getClassArgument(counter, 'level'); 
     while (indices.length<=level) 
      indices.push(0); 
     indices[level]++; 
     indices= indices.slice(level+1); 
     var text= document.createTextNode('Figure '+indices.join('.')); 
     counter.parentNode.insertBefore(text, counter.nextSibling); 

     if (counter.id!=='') { 
      for (var linki= document.links.length; linki-->0;) { 
       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); 
       } 
      } 
     } 
    } 
}; 

Answer 2

no puedo encontrar ninguna interfaz para acceder al valor de carne y hueso.

Si no puede obtener el valor de window.getComputedStyle, parece que sería imposible.

Lo que es más importante, aunque puede hacerlo, creo que esto podría estar abusando de CSS, ya que en este momento está rompiendo la barrera entre el contenido y la presentación.

Salida esta pregunta relacionada What are good uses of css “Content” property?

Answer 3

lo haría puerto el CSS a Javascript, esto le permite sacar el pie de figura y también se obtiene una mayor cobertura navegador. Usando jQuery que haría algo como esto:

$(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); 
    }); 
    }); 
}); 

entonces se podría hacer:

<div class="section">blabla <img id="foo" src="http://www.example.com/foo.jpg"></div> 
<p>Lorem ipsum dolor sit amet <a href="#foo" class="figurereference">see here</a></p> 

<script type="text/javascript"> 
    $(function() { 
    $("a.figurereference").each(function() { 
     var selector = $(this).attr("href"); 
     var $img = $(selector); 
     var s = $(this).text() + " (" + $img.attr("alt") + ")"; 
     $(this).text(s); 
    }); 
    }); 
</script> 

Aunque estoy de acuerdo en que al hacer esto el uso de CSS sería muy ordenado.

Answer 4

leyeron:

• http://www.w3.org/TR/CSS2/generate.html#propdef-content

contenido generado no altera la estructura del documento. En particular, es no retroalimentado al procesador de idioma de documento (por ejemplo, para reparsing).

---

• https://developer.mozilla.org/en/CSS/Getting_Started/Content

contenido especificado en una hoja de estilo no se convierta en parte de la DOM.

por esta razón la getComputedStyleno funcionará en este caso; Creo que la única manera es realizar un loop clásico a través de como alguien ha descrito a continuación.

Answer 5

No estoy seguro de cómo se implementa, pero el selector jquery .css() parece funcionar para esto en la última versión de safari, cromo y firefox.

.foo { content: 'hello'; } 

...

var value = $('.foo').css('content').toString(); 

Aquí hay un bolígrafo en vivo para inyectar los iconos SVG directamente desde el CSS; http://codepen.io/shadowmint/pen/unvLB

(observe que el valor de contenido debe ser escapado; es decir, '1'; el uso de contenido:. 1 no funcionará)