How to change div width when clicked?-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

const box = document.querySelector(".box");
let i = 0;
box.onclick = () => {
  if (i % 2 === 0) {
    box.classList.add("expand")
    box.classList.remove("compress");
  } else {
    box.classList.add("compress")
    box.classList.remove("expand");
  }
  i  ;
}

* {
  margin: 0;
  padding: 0;
}

body {
  width: 100vw;
  height: 100vh;
}

.box {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: rebeccapurple;
  
}

.expand{
  animation: expand 2s linear forwards paused;
}
.compress{
    animation: compress 2s linear forwards paused;
}
@keyframes compress {
  from {
    width: 100vw;
    border-radius: 0%;

  }
  to {
    width: 100px;
    border-radius: 50%;

  }
}

@keyframes expand {
  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>

what @scr2em told is right. Now if you want to use css for animation u can add and remove appropiate class. i have attached the code for same.