I want to change image clip with javascript (no jquery) but it seems i'm not doing it right.
Here's the fiddle - 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
Remove the ;
at end of the value.
el.style.clipPath = "inset(60px 60px 60px 60px)"
// here ------^^-----
var el = document.getElementById("someImg")
// doesn't work
el.style.clipPath = "inset(60px 60px 60px 60px);"
#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);
}
<div id="someImg" width="332px" height="300px">
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With