Skip to main content
título editado
Enlace
alf VI
  • 109
  • 7

aplicar los estilos que tiene un button a otro elemento button por medio de clic (sin usar clases css)

Origen Enlace
alf VI
  • 109
  • 7

aplicar los estilos que tiene un button otro elemento button por medio de clic (sin usar clases css)

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