0

Quiero hacer un span que cuando hagas clic se despliegue una capa con un mensaje y que se haga un cambio de icono cuando se despliegue. Para ello tengo una "X" como content que he puesto en el ":before" de dicho span y queda muy bien, pero ¿Como puedo Cambiar valor de dicho "content" en el selector ":before" para que muestre una "V" una vez se despliegue la capa?

document.addEventListener('click', (e) => 
    {
        const varAux_cadComparar = e.target.id;
        switch(true){
            case (/^elemSpan/).test(varAux_cadComparar):{
                fun_cambiarIconoDeElementoHtml('elemSpan');
                break;
            }
        }
    }
);

function fun_cambiarIconoDeElementoHtml(arg_objOid){
    var varObj_html;
    varObj_html = document.getElementById(arg_objOid);
    alert(window.getComputedStyle(varObj_html, ':before').getPropertyValue('content'));
}
#bloque_msj{display:none}
#elemSpan:before{
  content: 'X';
}
<span id="elemSpan">Pinche aqui para desplegar</span>
<div id="bloque_msj">Lore Ipsum</div>

0

1 respuesta 1

1

Me parece que de manera directa con javascript no se puede modificar el :before, no obstante hay otros métodos que son simples de implementar

1) Usando clases

Agregas una clase que cambia el content, luego con JS, colocas o quitas la clase

document.addEventListener('click', e => fun_cambiarIconoDeElementoHtml(e.target));

function fun_cambiarIconoDeElementoHtml(el){
   el.classList.toggle("conV");
}
#bloque_msj{display:none}
#elemSpan:before{
  content: "X"
}
#elemSpan.conV:before{
  content: "V"
}
<span id="elemSpan">Pinche aqui para desplegar</span>
<div id="bloque_msj">Lore Ipsum</div>

2) Usando atributos

Agregas un atributo y el content lee aquel atributo con la función attr()

document.addEventListener('click', e => fun_cambiarIconoDeElementoHtml(e.target));

function fun_cambiarIconoDeElementoHtml(el){
   el.dataset.icono="V";
   
   //Toggle
   //el.dataset.icono=el.dataset.icono ==="X"?"V":"X";
}
#bloque_msj{display:none}
#elemSpan:before{
  content: attr(data-icono)
}
<span id="elemSpan" data-icono="X">Pinche aqui para desplegar</span>
<div id="bloque_msj">Lore Ipsum</div>

3) Usando Propieddes

document.addEventListener('click', e => fun_cambiarIconoDeElementoHtml(e.target));

function fun_cambiarIconoDeElementoHtml(el){
   el.style.setProperty("--icono","'V'");
}
@property --icono {
    syntax: "<string>";
    inherits: false;
    initial-value: "X";
}

#bloque_msj{display:none}

#elemSpan{
 --icono:"X";
}
#elemSpan:before{
  content: var(--icono);
}
<span id="elemSpan">Pinche aqui para desplegar</span>
<div id="bloque_msj">Lore Ipsum</div>

1
  • Muchas gracias @Yussef al final hice el cambio de clases y listo.
    – mdromed
    Commented el 10 nov. 2023 a las 12:00

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.