Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change clip-path with javascript?

Tags:

javascript

css

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
like image 925
wyy Avatar asked Jun 23 '17 08:06

wyy


1 Answers

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>
like image 61
Pranav C Balan Avatar answered Sep 22 '22 04:09

Pranav C Balan