5

Necesito cambiar el atributo content de los pseudo elementos after y before del siguiente elemento del HTML sin utilizar librerías como jQuery. Si hiciera algo similar con CSS sería algo como esto:

#text::before{background:red;display:block,content:"HolaMundo";}
#text::after{background:blue;color:red,font-size:100px;}

¿Cuál sería la manera de hacerlo con Javascript?

var text = document.getElementById("text");
text...
2
  • 1
    ¿Por qué lo estás pensando con ::after y ::before en vez de simplemente insertar elementos/nodos antes y después de #text?
    – Mariano
    Commented el 22 nov. 2016 a las 0:07
  • Realmente es por necedad; hice las pruebas con css y funciona pero quiero aprender algo nuevo.
    – akko
    Commented el 27 nov. 2016 a las 5:22

4 respuestas 4

6

Puedes preparar ::after y ::before para que carguen por defecto el contenido de un atributo.

En el ejemplo he usado el atributo "title":

#text::after{
  content: attr(title);
}

Y después lo actualizar con Javascript.

document.querySelector("#text").setAttribute("title" , "Nuevo texto")

o

document.querySelector("#text").title = "Nuevo texto";
2
  • 3
    Buena respuesta, creo que title no es la mejor elección porque tiene efectos colaterales (el tooltip sobre el elemento) lo cual puede no ser deseado y como esta técnica funciona con cualquier otro atributo -incluso uno no standard- tal vez, seria mejor usar un data-*. Salu2 Commented el 22 nov. 2016 a las 13:10
  • Muchas gracias, con esto pude lograr lo que me propuse.
    – akko
    Commented el 27 nov. 2016 a las 6:43
3

Desafortunadamente, no es posible seleccionar ni cambiar un psuedo elemento directamente con JavaScript. Sin embargo, se puede hacer con una combinación de CSS y JavaScript. Por ejemplo, podrías crear algunas clases con diferentes contenidos en el psuedo elemento, y usar JavaScript para cambiar la clase:

CSS:

#text::before {
    content: "HolaMundo";
}

#text.nombre {
    content: "Mi nombre es...";
}

JavaScript:

// Decir nombre
document.querySelector("#text").classList.add("nombre");

// Decir HolaMundo
document.querySelector("#text").classList.remove("nombre");
3

Como ya dijeron no se puede cambiar los pseudo elemento ya que no pertenece al DOM.

En el siguiente código simulo con la ayuda de selectores de atributo y un poquito de js como se podría realizar:

var text = document.getElementById('texto');

function changeToAfter(id) {
  
  // Creamos el atributo data-class con el contenido after
  document.getElementById(id).setAttribute('data-class', 'after');
}

function changeToBefore(id){

  // Creamos el atributo data-class con el contenido before
  document.getElementById(id).setAttribute('data-class', 'before'); 
}

document.getElementById('after').onclick = function() {
  
    changeToAfter(text.id);
};

document.getElementById('before').onclick = function() {
  
    changeToBefore(text.id);
};
[data-class=before]::before{
  background: red;
  content: 'Hello ';
  background: red;
}

[data-class=after]::after {
  content: ' world!';
  background: pink;
}

/* solo para dar un poooco de estilo a los botones que están feísimos */
button {
  outline: 0; 
  width: 100px;
  margin-bottom: 5px;
  cursor: pointer;
  display: block;
}

button:hover {
  background: gray;
}
<p id="texto"> wonderful </p> 

<!-- Solo para simulación -->
<button id="before">Before</button> 
<button id="after">After</button>

0

Algo que si puedes hacer es crear un elemento <style id="myStyle"> dentro del cual puedas agregar contenido en medio de la ejecucion y asi tener un control un poco mayor de la situación. Lo he utilizado y funciona de lo mejor.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.