如何使用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 {&nbsp; z-index: 2;&nbsp; clip-path: circle(2em);&nbsp; transition: all 1.5s ease;&nbsp; width: 300px;&nbsp; height: 300px;&nbsp; background-color: black;}#clip-home.open {&nbsp; background-color: #45a26f;&nbsp; clip-path: circle(300px);}<div id="clip-home"></div>

Answer 2

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