Alcanzar y manipular pseudo-elementos CSS con JavaScript

9/Jul/2015 6

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:

Comentarios

  1. cialis dosage [#]

    generic cialis 20mg

  2. Czfsud [#]

    tadalafil 40 mg – tadalafil 5 mg buying tadalafil online safely

  3. Uhffxg [#]

    tadalafil canadian pharmacy – buy tadalafil 20mg price tadalafil 10 mg

  4. dapoxetine [#]

    priligy 90 mg dapoxetine usa

  5. brimonidine [#]

    combigan 5 ml brimonidine generic

  6. avanafil [#]

    buy avana online avana

Deja tu Comentario

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

CSSLab