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