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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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