My CSS:
.clip-circle {
clip-path: circle(10px at center);
}
My HTML:
<img src="" alt="" class="clip-circle" id="pic" >
How do I edit the px value of clip-path whenever a button is pressed ?
JS :
function changeSize (button) {
var pic = document.getElementById("pic");
pic.style.WhatDoIWriteHere = "??";
}
Thank you.
The property is called clipPath. I haven't found the documentation, but it is quite common that the style property is the same as in CSS just without the hyphen and in camelCase (just like backgroundColor).
var pic = document.getElementById("pic");
pic.addEventListener('click', e => {
e.target.style.clipPath = "circle(20px at center)";
});.clip-circle {
clip-path: circle(10px at center);
}<img src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iYmx1ZSIgLz4KPC9zdmc+" width="100" height="100" alt="" class="clip-circle" id="pic">