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

Question

如何更改#clip-home.open clip-path 值#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(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>

Answer 2

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