如何用javascript更改剪辑路径?

wyy*_*wyy 4 javascript css

我想用javascript(没有jquery)更改图像剪辑,但似乎我做得不对.

这是小提琴 - https://jsfiddle.net/y4j7bLge/1/

css:
clip-path: inset(20px 20px 20px 20px); // works

javascript:
el.style.clipPath = "inset(60px 60px 60px 60px);" // doesn't work
Run Code Online (Sandbox Code Playgroud)

Pra*_*lan 6

删除;值的末尾.

el.style.clipPath = "inset(60px 60px 60px 60px)" 
//                                 here ------^^-----
Run Code Online (Sandbox Code Playgroud)

var el = document.getElementById("someImg")

// doesn't work
el.style.clipPath = "inset(60px 60px 60px 60px);"
Run Code Online (Sandbox Code Playgroud)
#someImg {
  width: 332px;
  height: 300px;
  background-image: url(https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg);
  clip-path: inset(20px 20px 20px 20px);
}
Run Code Online (Sandbox Code Playgroud)
<div id="someImg" width="332px" height="300px">

</div>
Run Code Online (Sandbox Code Playgroud)

  • 呵呵,谢谢!:) (2认同)