javascript - 如何使用 javascript 更改 CSS 规则中的剪辑路径值

Question

如何更改 #clip-home.open 剪辑路径值

#clip-home {
  z-index: 2;
  clip-path: circle(2em);
  transition: all 1.5s ease;
}
#clip-home.open {
  background-color: #45a26f;
  clip-path: circle(300px);
}

Answer 1

document.getElementById('clip-home').style.clipPath = 'circle(100px)'

Answer 2

像这样：

document.getElementById("clip-home").style.clipPath = "circle(10px)"

遵循完整的工作代码：

document.getElementById("clip-home").style.clipPath = "circle(10px)"

#clip-home {
  z-index: 2;
  clip-path: circle(2em);
  transition: all 1.5s ease;
  width: 300px;
  height: 300px;
  background-color: black;
}
#clip-home.open {
  background-color: #45a26f;
  clip-path: circle(300px);
}

<div id="clip-home"></div>