¿Cómo accedo a las propiedades de estilo de los pseudo-elementos con jQuery?

Question

Por contexto, este es un seguimiento de an earlier question. En lugar de buscar en cssRules, me gustaría basar la lógica en los selectores jQuery que buscan los efectos de esas reglas.

propiedades predeterminadas dado de

.commentarea .author:before { 
    background-image: url(http://...); 
    background-position: -9999px -9999px; 
    /* ... */ 
} 

que se modifican selectivamente como en

.author[href$="gbacon"]:before /* ... */ { 
    content: ""; 
    background-position: 0 -140px 
} 

cómo puedo seleccionar pseudo-elementos cuyo fondo respectivas posiciones tener valores predeterminados? Copiando el selector como en

GM_log("size = " + $(".commentarea .author:before").size()); 

no coincide nada. Tratando .siblings() con

$(".commentarea .author") 
    .map(function(i) { 
     GM_log($(this) 
        .siblings() 
        .map(function (i) { return $(this).css("background-image") }) 
        .get() 
        .join(", ")) 
     }); 

produce sólo none valores.

Para obtener más información, consulte el live page. es posible?

Answer 1

No puede usar los pseudo-elementos :before y :after de esta manera. El objetivo de ellos es insertar contenido antes y después (respectivamente) del selector que ha especificado. el uso

Ejemplo:

HTML:

<span class='a'> 
    Outer 
    <span class='b'> 
     Inner 
    </span> 
</span> 

CSS:

.a .b:before { 
    content: "|Inserted using :before|"; 
} 

.a { 
    color: blue; 
} 

.b { 
    color: red; 
} 

Resultado:

http://jsfiddle.net/mzcp6/

Lo que sucedió fue que el texto |Inserted using :before| se insertó antes (bien, realmente, antepuesto en) el tramo interno porque era de clase b y un descendiente de un elemento de la clase a. Básicamente, :before y :after no seleccionan; ellos se modifican

Ejemplo:

Esto no funciona como se esperaba:

HTML:

<span class='a'> 
    <p>More text</p> 
    <span class='b'> 
     <p>More text</p> 
     Inner 
    </span> 
</span> 

CSS:

.a .b:before { 
    text-size: 100px; 
} 

No pasa nada:

http://jsfiddle.net/bQ2ty/

EDIT:

:before no es un selector válida jQuery: http://api.jquery.com/category/selectors/

Creo que tendrá que usar algo distinto :before o intentar extraer la regla original usando el plugin de jQuery : http://flesler.blogspot.com/2007/11/jqueryrule.html

Answer 2

Aquí hay una solución que utiliza javascript simple:

// Get the color value of .element:before 
var color = window.getComputedStyle(
    document.querySelector('.element'), ':before' 
).getPropertyValue('color'); 

// Get the content value of .element:before 
var content = window.getComputedStyle(
    document.querySelector('.element'), ':before' 
).getPropertyValue('content');