0

buen día, re formulo una pregunta que hice anteriormente mal

Quiero que al hacer clic en un botón el evento capture los estilos de este botón y me permita aplicarlos en otro elemento:

<button id="btn1">boton1</button>
    <br><br>
    <button onclick="aplicarEstilo(this.style)" id="EstiloBtn1"
    style="background-color:red; border:3px inset black; box-shadow: 2px 2px 2px red" 
    >
        Diseño1
    </button>
    <button onclick="aplicarEstilo(this.style)" id="EstiloBtn2"
    style="background-color:green; border:1px solid gray; box-shadow: 2px 2px 2px black ">
        Diseño2
    </button>
    <button onclick="aplicarEstilo(this.style)" id="EstiloBtn3"
    style="background-color:blue; border:2px inset cyan; box-shadow: 2px 2px 2px black "  >
        Diseño3</button>
<script>
function aplicarEstilo(estilo){
    let btn=document.getElementById("btn1");
    btn.style=estilo;
}
</script>

por lo que lei el valor que envio como parametro es un objetoEstilos y no puedo asignarlo directamente, intente aplicandole toString y nada, (Necesito hacer el proceso lo mas dinamico posible ya que son varios botones con diseños largos entre otras cosas). podría desde JS modificar la clase del objeto a una clase con los stilos fijos, pero en este caso no se me permite :c

lo único que me ha servido es seteando los estilos en la función javascript para que los aplique según el botón presionado:

<button id="btn1">boton1</button>
    <br><br>
    <button onclick="aplicarEstilo(1)" id="EstiloBtn1"
    style="background-color:red; border:3px inset black; box-shadow: 2px 2px 2px red" 
    >
        Diseño1
    </button>
    <button onclick="aplicarEstilo(2)" id="EstiloBtn2"
    style="background-color:green; border:1px solid gray; box-shadow: 2px 2px 2px black">
        Diseño2
    </button>
    <button onclick="aplicarEstilo(3)" id="EstiloBtn3"
    style="background-color:blue; border:2px inset cyan; box-shadow: 2px 2px 2px black">
        Diseño3</button>

<script>
function aplicarEstilo(valor){
    let btn=document.getElementById("btn1");
    if(valor==1){
        btn.style="background-color:red; border:3px inset black; box-shadow: 2px 2px 2px red";
    }
    if(valor==2){
        btn.style="background-color:green; border:1px solid gray; box-shadow: 2px 2px 2px black ";
    }
    if(valor==3){
        btn.style="background-color:blue; border:2px inset cyan; box-shadow: 2px 2px 2px black ";
    }
}
</script>

Cualquier sugerencia para hacer más dinámico el proceso me serviría,o como debería corregir lo que hice primero?... de antemano muchas gracias

1 respuesta 1

3

A ver, esto es un poco espinoso, pero voy a intentar explicarlo de forma sencilla. Básicamente no, lo que quieres hacer no se puede simplemente haciendo una asignación. Sin embargo, se puede dar un pequeño rodeo y es, primero obtener los estilos computados, convertirlos a un array de texto y luego copiarlo en el botón de destino pero como texto. Te pongo el código.

Primero, cambia los buttons para que la función sólo pase el this

<button onclick="aplicarEstilo(this)" ... >

Esto no es imprescindible, pero queda más claro.

Luego, cambia tu función por esta otra

function aplicarEstilo(boton){
    const estilo = window.getComputedStyle(boton);
    var cssText = estilo.cssText;
    if (!cssText) {
      cssText = Array.from(estilo).reduce((str, property) => {
        return `${str}${property}:${estilo.getPropertyValue(property)};`;
      }, '');
    }

    let btn=document.getElementById("btn1");
    btn.style.cssText = cssText;
}

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.