Alcanzar y manipular pseudo-elementos CSS con JavaScript
Los pseudo-elementos (y pseudo-clases) son selectores CSS virtuales que no existen esplícitamente en el árbol de DOM. Pero aparte de esa característica, puede ser manipulado con propiedades CSS como cualquier otra, a excepción que agrega una nueva propiedad content la que permite ingresar texto al pseudo-elemento.
Como estos selectores no existen en el árbol del documento, cómo alcanzarlos y manipularlos con JavaScript? Afortunadamente es posible con el método getComputedStyle():
HTML:⌗
<p> Mundo</p>
CSS:⌗
p:before {
content: "Hola";
}
JS:⌗
var elem = document.querySelectorAll("p");
if( elem.length ) {
[].forEach.call( elem, function(e) {
var pseudoContent = window.getComputedStyle(e,':before').content;
document.body.innerHTML += "Pseudo-element content: " + pseudoContent;
});
}
También puedes obtener otras propiedades CSS aplicadas, por ejemplo, el color de texto:
JS:⌗
var pseudoColor = window.getComputedStyle(e,':before').getPropertyValue('color');
Link:⌗
Leer otros artículos