Estoy tratando de hacer que cuando haga clic en el div, expanda el ancho completo de la ventana gráfica o vuelva a su ancho original. Pero no funciona. Probé box.style.width pero no hubo cambios, así que busqué en Google y obtuve getComputedStyle(). así que pude registrar en la consola el ancho, pero luego usé setProperty en el ancho y todavía no funcionó.
const box = document.querySelector(".box"); const bsl = window.getComputedStyle(box); let i = 0; window.onload = () => { console.log(bsl.getPropertyValue("width"), i, 77); } box.onclick = () => { if (i % 2 === 0) { bsl.setProperty("width", "100vw"); } else { bsl.setProperty("width", "100px"); } i++; console.log(box.clientWidth, i); } * { margin: 0; padding: 0; } body { width: 100vw; height: 100vh; } .box { width: 100px; height: 100px; border-radius: 50%; background-color: rebeccapurple; animation: exc 1s linear forwards paused; } @keyframes exc { from { width: 100px; } to { width: 100vw; border-radius: 0%; } } <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div id="boxid" class="box"></div> </body>aparentemente hubo un problema con tu animación especialmente "puasado" mira esto
const box = document.querySelector(".box"); let isExpand = false; box.onclick = () => { if (isExpand) { box.style.width = "100px" box.style.borderRadius = "50%" isExpand = false } else { box.style.width = "100vw" box.style.borderRadius = "0%" isExpand = true } } * { margin: 0; padding: 0; } body { width: 100vw; height: 100vh; } .box { width: 100px; height: 100px; border-radius: 50%; background-color: rebeccapurple; transition: width 1s linear, border-radius 1s linear; } <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div id="boxid" class="box"></div> </body>