Alcanzar y manipular pseudo-elementos CSS con JavaScript

9/jul/2015 0

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

JS Bin on jsbin.com

También puedes obtener otras propiedades CSS aplicadas, por ejemplo, el color de texto:

JS:

var pseudoColor = window.getComputedStyle(e,':before').getPropertyValue('color');

JS Bin on jsbin.com

Link:

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab