I'm trying to make it so that when i click the div, it either expands the full viewport width or returns to its original width. But its not working. I tried box.style.width but no change so I googled and got getComputedStyle(). so i was abe to console log the width but then i used setProperty on the width and it still didnt work.
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>apparently there was a problem with your animation especially "puased" check this out
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>